js DOM 常用API方法总结

来源：互联网发布：郭德纲相声知乎编辑：程序博客网时间：2024/05/24 03:56

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个孩子节点(文本节点)

我是第11个孩子节点(文本节点)

</ul>text内容

</body>

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","zhen") 添加文本

//node.insertAdjacentHTML("beforebegin","zhen") 添加HTML

//node.insertAdjacentHTML("beforebegin","你好");

第一个参数为固定四个值：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

详细链接：http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

conDom.dataset.name = "djl";

conDom.dataset.fdrDfbfb="gjo";//设置data-fdr-dfbfb="gjo"

//alert(conDom.dataset.name)

alert(conDom.dataset)

0 0