JavaScript组成之DOM节点操作

节点概述

• 网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中节点使用node来表示
• HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般的，节点至少拥有ndeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)三个基本属性

• 元素节点：nodeType 为1
• 属性节点：nodeType 为2
• 文本节点：nodeType 为3(文本节点包括文字、空格、换行等)

html:
<a href="http://www.baidu.com">百度⼀下</a>
JavaScript：
var a = document.querySelector('a');
a.nodeName ;// A
a.nodeType: // 1

节点层级&节点获取

利用DOM提供的方法获取元素	利用节点层级关系获取元素
document.getElementById()	利用父子兄节点关系获取元素
document.querySelector()	逻辑性强，但兼容性较差
document.querySelectorAll()
逻辑性不强繁琐

父级节点

parentNode

node.parentNode
//例子
<div class="demo">
        <div class="box">
            <span class="son">×</span>
        </div>
 </div>
var son = document.querySelector('.son');
console.log(son.parentNode); //输出的是类名为box的div

• parentNode属性可以返回某节点的父结点，**注意是最近的一个父结点**
• 指定的节点没有父结点则返回null

parentElement

node.parentElement;
//例子；获取id为box的父标签
var father = document.querySelector("#box").parentElement

• 此方法与上面的方法效果是一样的

子节点

children

parentNode.children

• parentNode.children 是一个只读属性，返回所有的子元素节点
• 它只返回直接子元素节点，其余节点不返回

第一个子节点

parentNode.firstElementChild

• firstElementChild 返回第一个子节点，找不到则返回null,有兼容性问题，IE9以上才支持

最后一个子节点

parentNode.firstElementChild

• firstElementChild 返回第一个子节点，找不到则返回null,有兼容性问题，IE9以上才支持

兄弟节点

上一个兄弟节点

node.previousElementSibling//只返回一个

• previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null,有兼容性问题，IE9以上才支持

下一个兄弟节点

node.nextElementSibling

• nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null,有兼容性问题，IE9以上才支持

节点创建&添加删除

createElement('tagName')

document.createElement("tagName");

var newDiv = document.createElement("div");

• document.createElement() 方法创建由 tagName 指定的HTML 元素
• 因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

node.appendChild(child)
//例子：给id为box的标签添加一个新的p标签
//1. 新建标签
var newP = document.createElement("p");
//2. 放在父标签里面
var father = document.querySelector("#box");
father.appendChild(newP);

• node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
• 将新标签作为父标签的最后一个自标签。父标签必须是已存在页面上的标签。

node.insertBefore(child,指定元素)
//html: 
<div id='box'>
    <p id="firstP">哈哈哈‘</p>
</div>
//例子：在id为box的标签的第一个p标签之前插入一个新的p标签
//1. 新建p标签
var newP = document.createElement("p");
//2. 找到父标签以及其兄弟标签
var father = document.querySelector("#box");
var brother = document.querySelector("#firstP");
//3. 插入新标签
father.insertBefore(newP,brother);

• node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。

示例：向页面添加新的元素

 // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  
        // 先获取父亲ul
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var newli = document.createElement('li');
        ul.insertBefore(newli, ul.firstElementChild);
        // 4. 我们想要页面添加一个新的元素分两步: 1. 创建元素 2.修改属性内容 3. 添加元素

若所添加的节点页面中不存在，则直接添加到页面中

若所添加的节点在页面中已存在，则会变换该节点在页面中的位置

删除节点

node.removeChild(child)
//例子：删除id为box的标签下第一个子标签
var father = document.querySelector('#box');
var elem = document.querySelector("#box :first-child");
father.removeChild(elem);

• node.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点

批量删除

• 先找到需要删除的标签，通过遍历依次调用removeChild来进行删除

  //例子：删除所有的图片
  var imgs  = document.querySelectorAll("img");
  // 遍历，删除每一个图片
  for(var i=0;i<imgs.length;i++){
      document.body.removeChild(imgs[i]);
  }
  

• 如果是删除某个标签下的所有子标签，可以通过设置innerHTML来达到快捷删除的目的

  //例子：删除id为box的标签下的所有子标签
  document.querySelector("#box").innerHTML = "";
  

复制节点(克隆节点)

node.cloneNode()

• node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
• 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
• 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 * 2. node.cloneNode(true); 括号为true 深拷贝 复制标签&复制里面的内容*

面试题

三种动态创建元素的区别

• doucument.write()
• element.innerHTML
• document.createElement()

区别：

• document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘

• innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

• innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

   // 2.2 innerHTML 用数组形式拼接
          var arr = [];
          for (var i = 0; i <= 100; i++) {
              arr.push('<a href="#">百度</a>');
          }
          inner.innerHTML = arr.join('');
  

• createElement()创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比createElement()高

DOM核心总结

对于DOM操作，我们主要针对子元素的操作，主要有

• 创建
• 增
• 删
• 查
• 改
• 属性操作
• 时间操作

创建

• document.write()

• innerHTML

• createElement()

增

• appendChild()

• insertBefore( new, child)

删

• removeChild()

改

• 主要修改dom的元素属性，dom元素的内容、属性、表单的值等
• 修改元素属性：src、href、title 等
• 修改普通元素内容：innerHTML、innerText
• 修改表单元素：value、type、disabled
• 修改元素样式：style、className

查

• 主要获取查询DOM的元素
• DOM提供的API方法：getElementById()、getElementsByTagName() (古老用法，不推荐)
• H5提供的新方法：querySelector()、querySelectorAll()
• 利用节点属性操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作

• 针对于自定义和自身属性
• setAttribute：设置DOM的属性值
• getAttribute：得到DOM的属性值
• getComputedStyle(标签变量名,null)获取该标签的所有css属性
• removeAttribute：移除属性