关于原生dom操作

淩亂°似流年 2022-07-16 05:26 195阅读 0赞

### 1. 关于查找 ###

#### 1.1 通过父子兄弟关系查找 ####

childNodes  //查找父元素的所有子元素（多层），返回一个类数组对象，支持到ie6
    parentNode  //查找子元素的父节点（一层），返回父元素对象，支持到ie6
    previousSibling //查找前一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6
    nextSibling     //查找后一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6
    firstChild  //查找父元素下的第一个子元素，返回子元素对象，支持到ie6
    lastChild   //查找父元素下的最后一个子元素，返回子元素对象，支持到ie6

各项dom操作均支持到ie6，但是...有问题，什么问题？举个栗子：

<div>
        <button>click</button>
        <button>单击</button>
    </div>
    
    var oDiv = document.getElementsByTagName('div')[0];
    console.log(oDiv.firstChild)

大家猜会输出什么，  
答案是：IE9及其之前的浏览器会输出：`<button>click<button>`,而其他标准浏览器会输出`''`  
原因是：对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点  
也就是说：除了IE9及之前的浏览器，会输出标签之间的空格的空文本，因为他们也是一个文本元素！

解决方案是，在其他浏览器下，除了ie9及其之前的浏览器，使用如下查找node节点的方法，可以忽略第一个文本节点，直接寻到html元素节点

childElementCount：返回子元素（不包括文本节点和注释）的个数。
    firstElementChild：指向第一个子元素；firstChild 的元素版。
    lastElementChild：指向最后一个子元素；lastChild 的元素版。
    previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
    nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

#### 1.2 通过元素自身属性查找 ####

getElementById('')  //通过元素的id进行查找，兼容到IE6
    getElementsByTagName('')    //通过元素的标签名进行查找，兼容到ie6
    getElementsByName('')   //通过元素的name属性查找，兼容到IE8
    getElementsByClass('') //通过元素的class属性去查找，html5新出的。兼容性你懂的。

此外还有一个，选择器：

querySelector() //接收一个CSS 选择符，返回与该模式匹配的第一个元素，兼容到Ie8+
    querySelectorAll()  //接收一个CSS 选择符，返回与该模式匹配的第一数组

### 2. 创建元素 ###

document.createElement() //创建HTML元素节点 document.createTextNode() //创建文本元素节点

### 3. 插入、替换、删除、克隆元素 ###

appendChild()   //向父元素的最后一个子元素处插入
    insertBefore()  //两个参数，要插入的节点和作为参照的节点
    replaceChild()  //两个参数，要插入的节点和要替换的节点
    removeChild()   //要移除的对象

特别注意：前面介绍的四个方法操作的都是某个节点的子节点，也就是说，这都是父元素对子元素的操作

cloneNode()
    // cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true
    // 的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false 的情况下，执行浅复制，
    // 即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。因此，这个节点
    // 副本就成为了一个“孤儿”，除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中

既然说了这么多，咱们学以致用一下，分享一道腾讯的笔试题，前两天我的小伙伴刚刚做完这个题  
题目：在网页中生成一个ul，里面有100个li，每个li的内容从上到下内容从1-100。生成结束1秒钟后，将100个li颠倒过来，内容也就变成了100-1。  
要求：不许使用了innerHTML以及innerText这两个方法，兼容性到IE8+

po上我的解题代码：

### 4. 其他 ###

#### 4.1 操作html元素下的属性 ####

getAttribute()  // 传入一个参数，获取相应属性的值
    setAttribute()  // 两个参数，第一个：属性名称，第二个：属性的值
    removeAttribute()   // 删除属性，输入要删除的属性名称

#### 4.2 焦点管理 ####

document.activeElement // 没有兼容性问题，这个属性始终会引用DOM 中当前获得了焦点的元素

#### 4.3 获取内容 ####

innerHTML   // 属性返回与调用元素的所有子节点（包括元素、注释和文本节点），当然也可以写入父元素下的子元素
    innerText   // 功能和上一条类似，但是只对操作元素下的文本元素有影响