侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 1 条评论

DOM相关

admin
2022-08-19 / 0 评论 / 27 阅读 / 正在检测是否收录...

什么是DOM?
DOM就是文档对象模型,当网页被加载时,浏览器会创建页面的文档对象模型。
通过DOM,JS能够访问和改变HTML文档的所有元素。
树形结构。

常见DOM操作?
创建节点:

let a = document.createElement('div')  创建一个DIV标签
let b = document.createTextNode('content') 创建一个文本节点
let c = document.createDocumentFragment()  用来创建一个文档碎片,它表示一种轻量级的文档,主要是用来存储临时节点,然后把文档碎片的内容一次性添加到DOM中
let d = document.createAttribute('custom') 创建属性节点,可以是自定义属性

获取节点:

document.querySelector('.element') 传入任何有效的css选择器,即可选中单个DOM元素(首个)   如果页面没有指定的元素时,返回null
document.querySelectorAll("p") 返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表。是一个静态的“快照”,而非“实时”的查询
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

更新节点:
innerHTML:
不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树

var p = document.getElementById('p');
p.innerHTML = 'ABC'
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';

innerText、textContent:
自动对字符串进行HTML编码,保证无法设置任何HTML标签
和上面的一样。只不过没办法写标签了。
style:
DOM节点的style属性对应所有的CSS,可以直接获取或设置。遇到-需要转化为驼峰命名

let p = document.getElementById('p-id');
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 驼峰命名
p.style.paddingTop = '2em';

替换节点:

父节点.replaceChild(new, old);

修改属性值:

父节点.setAttribute("属性名","属性值");

添加节点:
可以利用innerHTML在其中直接添加节点
appendChild:把一个子节点添加到父节点的最后一个子节点

let js = document.getElementById('js')
js.innerHTML = "JavaScript"
let list = document.getElementById('list');
list.appendChild(js);

insertBefore:把子节点插入到指定的位置的前面
setAttribute:在指定元素中添加一个属性节点,如果元素中已有该属性改变属性值

parentElement.insertBefore(newElement, referenceElement)

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名,第二个参数属性值。

删除节点:
删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉

// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true

事件监听
添加监听事件,可以给一个DOM元素添加多个不同监听,也可以添加相同监听。

let p1 = document.getElementById('p')
p1.addEventListener(event, function, useCapture)
// 第一个参数是事件的类型 (如 "click" 或 "mousedown","mouseover","mouseout")。
// 第二个参数是事件触发后调用的函数。
// 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 false冒泡是默认
如果获取的是一个列表,那么可以使用foreach
const lis = Array.from(document.getElementsByTagName('li'));
lis.forEach(element => {
  function(){}
} )

可以给window对象添加监听

// resize是监听到浏览器窗口改变的时候触发(多搭配防抖节流)
window.addEventListener("resize",function(){
                document.getElementById("demo").innerHTML=Math.random();
            });

删除监听,需要通过触发某个函数删除,例如给BUTTON绑定onclick事件。

function removeHandler() {
                document.getElementById("myDIV").removeEventListener("mousemove",myFunction);
            }

阻止冒泡与阻止默认

e.stoppropagation()  阻止冒泡
e.preventDefault()   阻止默认
return false;        既阻止冒泡又阻止默认

事件监听中的e:
e.target指向的是触发事件的元素
e.currentTarget指向的是添加监听事件的元素

冒泡具体场景:
事件委托

ul.addEventListener('click', function(e){
    // e.currentTarget 被监听的对象,一般不变
    // e.target 正在操作的对象,有可能变
    if(e.target.tagName.toLowerCase()=== 'li'){
        fn();
    }
})

监听窗口尺寸大小变化

let getWindowInfo = function(){
  let windowInfo = {
  width:window.innerWidth
  height:window.innerHeight
  }
}
// 无防抖的监听
window.addEventListener('resize',getWindowInfo)
// 添加防抖
let debounce = (fn,delay) => {
  let timer
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn();
    },delay)
  }
}
let cacelDebounce = debounce(getWindowInfo,500)
window.addEventListener('resize',cacelDebounce)
0

评论 (0)

取消