首页 > 代码库 > 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相关