首页 > 代码库 > DOM相关

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); 

DOM相关