js节点操作

js节点操作

1.节点

**节点:**网页中所有内容都是节点(标签, 属性, 文本, 注释等),在DOM中,节点使用node来表示;

HTML DOM 树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点) 均可被修改,也可以删除或创建;

几点至少拥有nodeType(节点类型), nodeName (节点名称) 和 nodeValue(节点值) 这三个基本属性;

1.元素节点 nodeType 为 1;

2.属性节点 nodeType 为 2;

3.文本节点 nodeType 为 3 (文本节点包含文字,空格,换行…);

2.节点层级

利用DOM树可以把节点划分为不同层级关系,常见的是父子兄层级关系

2.1父级节点

node.parentNode;

1.parentNode 属性可返回某节点的父节点,注意是最近的一个父节点;

2.如果指定节点没有父节点则返回null;

2.2子节点

2.21 所有子节点

parentNode.childNodes;

parentNode.childNodes 返回包含指定节点的子节点的集合,该集合会实时更新;

**注意:**返回值里边包含所有子节点,包括元素节点,文本节点等;

2.22子元素节点

parentNode.children

parentNode.children 是一个只读属性,返回所有的子元素节点,只返回子元素节点,其余节点不返回;

2.23 第一个子节点

parentNode.firstChild;

firstChild 返回第一个子节点,找不到则返回null,也包含所有节点;

2.24 最后一个子节点

parentNode.lastChild;

lastChild返回最后一个子节点 ,找不到则返回null,也包含所有节点;

2.25第一个子元素节点

parentNode.firstElementChild;

firstElementChild返回第一个子元素节点,找不到则返回null;

也可以使用parentNode.children[0](没有兼容性问题);

2.26最后一个子元素节点

parentNode.lastElementChild;

lastElementChild返回最后一个子元素节点,找不到则返回null;

也可以使用parentNode.children[parentNode.children.length - 1](没有兼容性问题)

3.兄弟节点

3.1 下一个兄弟节点

node.nextSibling;

nextSibling返回当前元素的下一个兄弟节点,找不到则返回null;

3.2 上一个兄弟节点

node.previousSibling;

previousSibling返回当前元素上一个兄弟节点,找不到则返回null;

3.3下一个兄弟元素节点(有兼容性)

node.nextElementSibling;

nextElementSibling 返回当前元素的下一个兄弟节点,找不到返回null;

3.4上一个兄弟元素节点(有兼容性)

node.reviousElementSIbling;

previousElementSibling 返回当前元素的上一个兄弟节点,找不到则返回null;

3.5解决兄弟元素节点兼容性

function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }  

4.创建节点

document.creatElement('tagName');

document.creatElement() 方法有tagName 指定的HTML元素,由于这些元素原来并不存在,根据我们的需求动态生成的,因此也被称为动态创建元素节点;

5.添加节点

1.node.appendChild(child);

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾;

2.node.insertBefore() ;

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

6.删除节点

node.removeChild(child);

node.removeChild() 方法从node节点中删除一个子节点,返回删除的节点;

7.复制节点

node.cloneNode();

node.cloneNode() 方法返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点;

注意:

1.如果括号里边参数为空或者为false,则是浅拷贝,只克隆节点本身,不克隆里面的子节点;

2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点;

8.创建元素的三种方式

document.write();

element.innerHTML

element.creatElement();

区别:

1.document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则他会导致页面全部重绘;

2.innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘;

3.innerHTML 创建多个元素效率更高,(不要使用个拼接字符串,要采用数组的形式拼接),结构复杂;

4.creatElement() 创建多个元素效率稍低一点,结构清晰;

不同浏览器下,innerHTML效率要比creatElement高;