<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title></title> </head> <body lang="en-us"> <p><span class="className">1</span><i>2</i></p> <div></div> </body> <script> /*-----------------------------------属性-----------------------------------*/ //childNodes -当前节点的全部子级节点（有的浏览器里会把元素里的空白节点转换成文本节点 nodeType==3） var nodes=document.getElementsByTagName('p')[0].childNodes; for(var i=0;i<nodes.length;i++){ /* * <span>1</span> * <i>2</i> * */ console.info(nodes[i]); } var childNodes=document.getElementsByTagName('p')[0]; //firstChild -childNodes里的第一个节点 相当于childNodes[0] *所有主流浏览器都支持 firstChild 属性。 //lastChild -childNodes里的最后一个节点 相当于childNodes[childNodes.length-1] /* * <span>1</span> * <i>2</i> * */ console.info(childNodes.firstChild); console.info(childNodes.lastChild); //parentNode -父节点 如果指定节点没有父节点，则返回 null。 /* *<p></p> * */ console.info(childNodes.lastChild.parentNode); //nextSibling previousSibling -兄弟节点 如果没有 nextSibling previousSibling节点，则返回值为 null /* *<span>1</span> *<i>2</i> * */ console.info(childNodes.lastChild.previousSibling); console.info(childNodes.firstChild.nextSibling); //nodeValue -返回元素节点里的值 注意：文本始终位于文本节点中 /* *1 * */ console.info(childNodes.firstChild.childNodes[0].nodeValue); //nodeName -返回元素节点名称时，并不包含html里的<>符号 /* * #text * SPAN * */ console.info(childNodes.firstChild.childNodes[0].nodeName); console.info(childNodes.firstChild.nodeName); //tagName -返回元素的标签名 /* *undefined * SPAN * */ console.info(childNodes.firstChild.childNodes[0].tagName); console.info(childNodes.firstChild.tagName); //className -属性设置或返回元素的 class 属性 /* *className * */ console.info(childNodes.firstChild.className); // id -设置或返回元素的 id childNodes.firstChild.id='hello'; console.info(childNodes.firstChild.id); //innerHTML -设置或返回元素的 inner HTML //lang -设置或返回元素的语言代码 console.info(document.getElementsByTagName('body')[0].lang); //title -设置或返回元素的标题 //textContent -返回所有子及后代节点的文本 console.info(document.getElementsByTagName('body')[0].textContent); //ownerDocument -以 Document 对象的形式返回节点的 owner document console.info(document.getElementsByTagName('body')[0].ownerDocument); /*-----------------------------------方法-----------------------------------*/ //appendChild() -向节点添加最后一个子节点 也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素 var p=document.getElementsByTagName('p')[0]; var textNode=document.createTextNode('world!'); var newElementNode=document.createElement('b'); newElementNode.appendChild(textNode);//添加元素 p.appendChild(newElementNode);//添加元素 var div=document.getElementsByTagName('div')[0]; div.appendChild(p);//移动元素 //cloneNode -克隆元素 创建节点的拷贝，并返回该副本 var cloneNode=div.cloneNode(true);//克隆所有后代,参数设置为true document.getElementsByTagName('body')[0].appendChild(cloneNode); //insertBefore -在指定的已有子节点之前插入新的子节点 var listNode=document.createElement('ul'); var liNode=document.createElement('li'); listNode.appendChild(liNode); var body=document.getElementsByTagName('body')[0]; body.appendChild(listNode); var textNode=document.createTextNode('haha!'); body.insertBefore(textNode,listNode); //removeChild -从元素中移除子节点 返回值是对删除节点的引用 /* * "haha" * */ var delNode=textNode.parentNode.removeChild(textNode); console.info(delNode); //replaceChild -用新节点替换某个子节点 var newNode=document.createTextNode('hehe!'); var oldNode=document.getElementsByTagName('p')[0].childNodes[0]; oldNode.parentNode.replaceChild(newNode,oldNode); //setAttribute getAttribute -设置和返回指定属性名的属性值 var div2=document.getElementsByTagName('div')[0]; div2.setAttribute('data-id','71121'); console.info(div2.getAttribute('data-id'));//71121 //normalize -移除空的文本节点，并连接相邻的文本节点 function addTextNode(){ var text=document.createTextNode('文本节点内容'); div2.appendChild(text); } addTextNode(); addTextNode(); console.info(div2.childNodes.length); div2.normalize(); console.info(div2.childNodes.length);