节点的增删改查

Posted 2020-10-09

节点的增删改查

@(js 高级教程（es5）)

本文不会详细讲解，只是简单提及知识要点，详细可以参考《dom高级编程》。

1. document.write

document.write(‘<h1>创建节点</h1>‘);

创建的节点会，重新生成一个html的DOM覆盖之前的，所以不可用。

2. create 系列创建

常用有四种方法，分别如下：

• document.createCommot() 创建注释
• document.createDocumentFragment()
• document.createTextNode()
• document.createElement()

说明：DocumentFragment，它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。

例子：

var comment = document.createCommot(‘A comment‘);
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
	li = document.createElement("li");
	li.appendChild(document.createTextNode("Item " + (i+1)));
	fragment.appendChild(li);
}
ul.appendChild(fragment);
document.body.innerBefore(comment,document.body.firstChild);

3.高效的创建节点

• innerHTML
• outerHTML 包含自身节点的hmtl的返回
• innerText 剔除所有tag，返回文本节点,等同于textContent
• textContent 与innerText 区别在与 innerText不剔除标签转行的空格
• outerText 在查询时与innerText几乎一样，区别在于赋值，outerText会将自身的节点替换掉，不建议使用

window.onload = function () {
  var div = document.getElementById(‘div‘);
  var str = "<p> this is document element demo</p>";
  div.innerHTML = str;
  console.log(‘outerHTML‘,div.outerHTML); 
  console.log(‘innerText‘,div.innerText);
  console.log(‘textContent‘,div.textContent);
  console.log(‘outerText‘,div.outerText);
}

4. 查找节点

有两套api，一套是node，另一套则是document。

Node

• fistChild
• lastChild
• nextSibling
• previousSibling
• parentNode
• childNodes[i]
• childNodes.item(1)

例子：

// 遍历文本节点
// 递归
window.onload = function() {
  var s = "";

  function travel(space, node) {
    if (node.tagName) {
      s += space + node.tagName + ‘<br />‘;
    }

    var len = node.childNodes.length;
    for (var i = 0; i < len; i++) {
      travel(space + ‘|-‘, node.childNodes[i]);
    }

  }
  travel("", document);
  document.write(s);
}

DOM

实际上这套api解决了空白节点

• firstElementChild
• lastElementChild
• nextElementSibling
• previousElementSibling
• children[1]

5. 类数组NodeList

NodeList 对象是一个节点的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的. 详细地址

具体实例如下如下：

var div = document.getElementById(‘div‘);
var nodes = div.childNodes; // nodes就是一个NodeList的实例化

function makeArray(Nodelist) {
  var arr = null;
  try {
    return Array.prototype.slice.call(NodeList);
  } catch(e) {
    arr = [];
    for(var i = 0, len = nodeList.length; i < len; i++) {
      arr.push(nodeList[i])
    }
  }
  return arr;
}

6. 类数组对象HTMLCollection

HTML简单来说是节点集合，例如，获取ul下的所有li，就是一个HTMLCollection，HTMLCollection 是即时更新的。 详细地址

它与Nodelist的区别，前者主要用在element，后者主要用于node。另外，他们是否时时更新，点击详细地址查看。

• getElementsByTagName
• document.scripts
• document.links
• document.images
• document.forms
• tr.cells
• select.options
• 略

7. 类数组对象NamedNodeMap

NamedNodeMap 接口表示属性节点 Attr 对象的集合。 详细地址

  var box = document.querySelector(‘.box‘);
  var attrs = box.attributes;
  console.log(attrs);
  console.log(‘class‘,attrs.class);
  console.log(‘data-role‘,attrs[‘data-role‘]);

8. 类数组的对象的动态性

时时更新是什么? 举个例子：

var divs = document.getElementsByTagName(‘div‘);
console.log(divs.length);
document.body.appendChild(‘div‘);
console.log(divs.length)

你会发现前后两次输出的divs.length是不一样的。这是简单例子，实际上事件委托也是利用动态性，e.target 和上面divs.length非常类似。

9. 现代浏览器查找元素的方法

1. 元素和节点区别。（节点包含元素）
2. Api

• document.getElementById
• getElementsByTagName
• document.getElementsByName
• getElementsByClassName
• querySelector
• querySelectorAll

10. 添加节点操作

详细地址

• appendChild 节点内部末尾位置
• insertBefore 可以插入节点内部的任何位置
• replaceChild
• cloneNode 通过传参可以拷贝内部节点，也可以不拷贝内部节点
• normalize 移除空的文本节点，并连接相邻的文本节点。
• splitText splitText方法可以根据指定的偏移量将一个文本节点分割成前后两个独立的兄弟节点

11. 删除节点

• removeChild
• removeNode
• innerHTML
• deleteContents
• textContent