Dom节点继承树基本操作

遍历节点树

基于元素节点树的遍历

parcntElcrmcnt -> 返回当前元素的父元秦节点 (IE不兼容)
children ->只返回当前元素的元素子节点
node.childFlement(ount === nodechildren.length当前元素节点的子元素(IE不兼容)
firstElementChild->返回的是第一个元素节点(IE不兼容)
laslElemenlChild -> 返回的是最后一个元素节点(IE不兼容)
nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点(IE不兼容)

例：parcntElcrmcnt -> 返回当前元素的父元秦节点

方法一：返回第1层祖先元素节点

<div><strong><span><i></i> </span></strong></div>
var i = document.getElementsByTagName('i')[0];
console.log(i.parentElement);//<span>...</span>

方法二：返回第n层祖先元素节点

    <div><strong><span><i></i> </span></strong></div><script>var i = document.getElementsByTagName('i')[0];function retParent(elem, n) {while (elem && n) {elem = elem.parentElement;n--}return elem}retParent(i, 1)</script>

例：children ->只返回当前元素的元素子节点

    <div><p></p><p></p><p></p></div><script>var div = document.getElementsByTagName('div')[0];console.log(div.children); //HTMLCollection(3) [p, p, p]</script>

例：返回第n个兄弟元素节点

nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点

    <strong></strong><span></span><i></i><script>var span = document.getElementsByTagName('span')[0];function retSibling(e, n) {while (e && n) {if (n > 0) {e = e.nextElementSiblingn--} else {e = e.previousElementSiblingn++}}console.log(e, "e");}retSibling(span, -1) //<strong></strong></script>

节点的四个属性

nodeName---------元素的标签名，以大写形式表示,只读
nodeValue----------Text（文本）节点或Comment（注释）节点的文本内容可读写
nodeType-----------该节点的类型，只读
attributes------------Element 节点的属性集合年的节点
节点的一个方法---- hasChildNodes()是否有子节点,返回true/false

nodeType返回节点的类型--数字

例：

    <div><p></p></div><script>var div = document.getElementsByTagName('div')[0];console.log(div.children[0].nodeType); //1</script>

例：获取div元素下的所有元素节点，

方法一：当nodeType===1是为元素节点，解决浏览器不兼容问题

      <div><p></p></div>var div = document.getElementsByTagName('div')[0];function retElementChild(node) {var arr = [],child = node.childNodes,//childNodes子节点们len = child.length;for (var i = 0; i < len; i++) {if (child[i].nodeType === 1) {arr.push(child[i]);}}return arr;}retElementChild(div) //[p]

方法二：children ->只返回当前元素的元素子节点

    <div><p></p></div><script>var div = document.getElementsByTagName('div')[0];console.log(div.children);//HTMLCollection [p]</script>

例：attributes------------Element 节点的属性集合年的节点

<div class="demo" id="only"></div><script>var div = document.getElementsByTagName('div')[0];console.log(div.attributes); //{0: class, 1: id, class: class, id: id, length: 2}</script>

DOM结构树：继承关系

document--> HTMLDocument.prototype--> Document.prototype

dom操作

增

document.createElement()---创建元素节点
document.createTextNode()---创建文本节点
document.createComment()----创建注释节点
dncumenl.crealeDocumeniFmagme()

 var p = document.createElement("p");

插

appendChild0;---添加到父节点的最后一个子节点
inserlBelare(a, b)---（a要插入的新节点-b参考节点）新节点将被插入到参考节点之前的位置

appendChild()方法：

将一个新的子节点添加到指定父节点的子节点列表的方法。该方法接收一个参数，即要添加的新子节点，然后将其添加为父节点的最后一个子节点

类似于push方法，向元素中添加新的子元素

    <div></div><script>var div = document.getElementsByTagName("div")[0];var text = document.createTextNode("Hello World");div.appendChild(text); //Hello World</script>

inserlBelare(a, b)方法：

在指定的参考节点之前插入新节点。使用 insertBefore() 方法时，需要指定两个参数：要插入的新节点和参考节点。新节点将被插入到参考节点之前的位置

    <div><span></span></div><script>var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];var strong = document.createElement("strong");div.insertBefore(strong, span); // <div><strong></strong><span></span></div></script>

删

removeChild()--在父节点中通过剪切删除，可以拿到删除后的元素

remove()--直接删除

    <div><span></span></div><script>var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];var str = div.removeChild(span) //通过剪切删除可以拿到删除后的元素console.log(str);//<span></span></script>

    <div><span></span></div><script>var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];span.remove()</script>

替换

replaceChild(new, origin)---new新的，origin旧的

    <div><span></span></div><script>var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];var p = document.createElement("p");//创建p元素节点div.replaceChild(p, span) // 把span元素替换p元素</script>

Element属性方法

例：

    <div></div><script>var div = document.getElementsByTagName("div")[0];div.innerHTML = "<h2>hello world</h2>"; //hello worlddiv.innerText = "<h2>hello world</h2>"; //<h2>hello world</h2></script>

例：

getAttribute 方法用于获取元素的属性值。通过调用 getAttribute 方法并传入要获取的属性名作为参数，可以获得该元素指定属性的值

    <div id="doem"></div><script>var div = document.getElementsByTagName('div')[0];console.log(div.getAttribute('id')); //doem</script>

setAttribute 方法用于给元素设置或添加一个属性。如果指定的属性已经存在，则该方法将更新该属性的值

    <div></div><script>var div = document.getElementsByTagName('div')[0];div.setAttribute('class', 'newClass')console.log(div); //<div class="newclass"></div></script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/689923.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！