DOM常用API总结
NODE类:
/*节点属性
parentNode 获取父亲节点 返回一个父节点对象
childNodes 获取所有孩子节点 返回一个对象集合
firstChild 获取第一个孩子节点
lastChild 获取最后一个孩子节点
nextSibling 获取下一个兄弟节点
prevousSibling 获取上一个上一个小兄弟节点
nodeName 获取节点名字
nodeType 获取节点类型
nodeValue 获取节点值
//节点方法
appendChild 在末尾增加一个孩子(首先要拿到他的父节点)
insertBefore 在某个孩子节点钱插入一个节点
Contains 是否包含某个节点
hasChildNodes
removeChild 删除某个节点,新获取父元素
replaceChild 替换某个孩子节点
cloneNode clone节点
<body>
我是文本节点
<ul id="container">我是第1个孩子节点(文本节点)
<li name="f" value="j">我是第2个孩子节点(元素节点)</li>我是第3个孩子节点(文本节点)
<li>我是第4个孩子节点(元素节点)</li>我是第5个孩子节点(文本节点)
<li>我是第6个孩子节点(元素节点)</li>我是第7个孩子节点(文本节点)
<li>我是第8个孩子节点(元素节点)</li>我是第9个孩子节点(文本节点)
<!--我是第10个孩子节点(文本节点:注释)-->我是第11个孩子节点(文本节点)
</ul>text内容
<ul id="test">fb</ul>
</body>
<script type="text/javascript">
var node=document.getElementById("container");
var test=document.getElementById("test");
var parent=node.parentNode; //获取父亲节点 返回一个父节点对象
var appendChild=document.createElement("i")
//所有孩子节点(元素节点,文本节点,属性节点)返回一个对象集合
var child=node.childNodes;
var node=node.childNodes.length; //11
alert(node.childNodes[9].nodeValue) //拿到注释
alert(node.lastChild.nodeValue) //我是第11个孩子节点(文本节点)
//alert(typeof child) //对象
//alert(parent.firstChild) //包括文本节点,所以第一个孩子是文本节点 alert(parent.firstChild.nodeType) // TEXT_NODE: 3
//alert(parent.firstChild.nodeName) // 第一个孩子是文本节点 打印值:#text
//alert(parent.lastChild)
//alert(node.nodeName) //节点名字 元素节点ul
//alert(node.nodeValue) //null
//alert(node.nextSibling.nodeName) //#text
//alert(node.nextSibling.nodeValue) //text内容 所以证明了文本也是一个节点
//alert(node.previousSibling.nodeType) //TEXT_NODE: 3
//alert(test.nodeType)
//alert(parent.childNodes[0].nodeValue) //文本内容
方法:
//parent.appendChild(appendChild)//在末尾增加一个孩子,要先拿到父亲元素
//node.insertBefore(appendChild,node.childNodes[0])//插在第一孩子之前
//parent.removeChild(node) //删除孩子 删除整个node节点
//第一个参数为新的孩子,第二个参数是要被替换的孩子
//parent.replaceChild(appendChild,node)
//alert(parent.contains(node)) //是否包含孩子
//它会把一个元素的属性及所有的值包括内联事件都会复制过去,但是
//通过addEventListener或者node.onclick方式事件(即动态添加事件)是不会被复制
//var cloneChild=node.cloneNode(true) //可以先克隆,后添加孩子 true表示深度克隆会把里面的子元素也克隆,false只克隆该元素,他的子元素不会包含进去
//alert(cloneChild.id)
//alert(parent.hasChildNodes(node)) //某节点是否包含某节点
Element类:
属性
innerHTML
outerHTML
innerText
parentElement
children
firstElementChild
lastElementChild
nextElementSibling
reviousElementSibling
textContent;
tagName:获取元素名称 div
方法:/node.insertAdjacentElement("beforebegin",appendChild)添加元素
//node.insertAdjacentText("beforebegin","<i>zhen</i>") 添加文本
//node.insertAdjacentHTML("beforebegin","<i>zhen</i>") 添加HTML
//node.insertAdjacentHTML("beforebegin","<span>你好</span>");
*/
第一个参数为固定四个值:beforebegin beforeend afterbegin afterend
Attribute相关:
getAttribute(属性名) //返回属性值
setAttribute(属性名,属性值)
removeAttribute(属性名)
Attributes //一个属性 得到某个元素的所有属性 返回一个集合
classList相关
(http://sentsin.com/web/190.html(详细链接))
var classList=conDom.classList
/*for (var i in classList) {
alert(i+"========="+classList[i])
};*/ //返回所有的class对象集合
// alert(conDom.classList.length) //集合长度
// alert(conDom.classList.item(1)) //返回一个class的值
//conDom.classList.add("djl") 添加一个class
//conDom.classList.remove("sdfv") 删除一个class
//alert(conDom.classList.contains("sdfv")) //包含某个class
//conDom.classList.toggle("xioasd")
// dataset
conDom.dataset.name = "djl";
conDom.dataset.fdrDfbfb="gjo";//设置data-fdr-dfbfb="gjo"
//alert(conDom.dataset.name)
alert(conDom.dataset)