DOM相关

归纳一下，

不管是DOM Core还是HTML-DOM，我们在使用JavaScript的时候要注意浏览器之间的兼容性，因为不同的浏览器对这两类方法和属性的支持可能不一样，一般推荐使用DOM Core方法和属性，尽管稍显繁杂。

 

 

常见的Core DOM方法如下：

1、创建节点

createElement()

createTextNode()

2、复制节点

cloneNode()

3、插入节点

appendChild()

insertBefore()

4、删除节点

removeChild()

5、替换节点

replaceChild()

6、查找和设置节点属性

setAttribute()

getAttribute()

7、查找节点

getElementById()

getElementsByTagName()

hasChildNode()

 

常见的Core DOM属性如下：

node.childNodes

node.firstChild

node.lastChild

node.nextSibling

node.previousSibling

node.parentNode

  

 

总结/回顾：

 DOM 基本方法

 

直接引用方法：

1、documen.getElementById(id);

2、document.getElementByTagName(tagName);

返回一个数组，包含对这些节点的引用

 

间接引用节点 

3、子节点element.childNode

返回element的所有子节点，通过element.childNodes[i]的方式来调用

Element.firstChild = element.childNodes[0];

Element.lastChild = element.childNodes[element.childNodes.length-1];

4、父节点element.parentNode

5、下一个兄弟节点element.nextSibling;

上一个兄弟节点element.previousSibling;

 

 

获得节点信息 

6、nodeName属性获得节点名称eg:<a></a>返回”a”; class=”test”返回”test”; 文本节点返回文本内容。

7、nodeType返回节点的类型。元素节点返回1；属性节点返回2；文本节点返回3；

8、nodeValue返回节点的值。元素节点返回null；属性节点返回undefined；文本节点返回文本内容。

9、hasChildNodes()返回布尔值，判断是否含有子节点。

10、tagName属性返回元素的标记名称。等价于nodeName属性

 

 

处理属性节点

 

11、用setAttributeNode()方法给元素节点添加属性。

ElementNode.setAttribute(attributeName,attributeValue); 参数分别为(属性名称，属性值)

12、用getAttribute()方法获得属性值

 

 

处理文本节点

13、innerHTML和innerText方法

 

 

改变文档的层次结构

 

14、创建元素节点document.createElement()

15、创建文本节点Document.createTextNode();

//注: document.createTextNode(" ");他不会通过html编码，也就是说这里创建的不是空格，而是字符串

16、添加子节点 appendChild()。parentElement.appendChild(childElement);

17、插入子节点insertBefore()。

appendChild、insertBefore和insertAfter(自定义函数) 的区别

18、使用replaceChild方法取代子结点。parentNode.replaceChild(newNode,oldNode); 

19、使用cloneNode方法复制结点 。node.cloneNode(includeChildren); includeChildren为bool，表示是否复制其子结点 。

20、使用removeChild方法删除子结点 。parentNode.removeChild(childNode);