js总结（6） DOM操作节点元素遍历树

mac2022-06-30 85

DOM，主要用来修改HTML的标准编程接口，可以用来修改各种html标签内容和属性样式。

查找：

document：整个文档。

document.getElementsByTagName

document.getElementById

document.getElementsByClassName

遍历节点：

var div=document.getElementsByClassName('con')[0];

div.parentNode-> 父节点 (最顶端的parentNode为#document);遍历元素：

div.children 遍历所有的子元素（孙子就不算）这就是一个对象，可以.length属性

获取节点类型：div.firstElementChild.nodeType

.......................总结............................

节点元素节点

div.parentNode; div.parentElement; .childNodes .children .firstchild; .firstElementChild; .lastchild; .lastElementchild; .nextSibling; .nextElementSibling; .previousSibling .prevElementSibling;

节点的类型

元素节点 —— 1属性节点 —— 2文本节点 —— 3注释节点 —— 8document —— 9DocumentFragment —— 11 获取节点类型 nodeType

习题

1. 封装函数，返回元素e的第n层祖先元素

var strong=document.getElementsByTagName('strong')[0]; function retparent(elem,n) { while(elem && n){ elem = elem.parentElement; n--; } return elem; } retparent(strong,4);

2.遍历元素节点树

1. 这个方法只能查到儿子节点

var div=document.getElementsByTagName('div')[0]; var arr=[]; arr.push(div.children);

2.儿子孙子一起遍历

var div=document.getElementsByTagName('div')[0]; var child = div.firstChild; while(child != div.lastChild){ //判断是否是最后一个 if(child.nodeType == 1){ //判断是不是元素节点 console.log( child ); } child = child.nextSibling; }

3. 兼容性一起遍历

var div=document.getElementsByTagName('div')[0]; var child = div.firstElementChild; //这是返回第一个元素节点 next就是下一个孙子也可以返回 while(child){ console.log( child ); child = child.nextElementSibling; } var s=div.firstElementChild; for (var i = 0 ; i <div.children.length; i++) { console.log(s); s=s.nextElementSibling; }

3.查找e的第n个兄弟元素。

var strong=document.getElementsByTagName('strong')[0]; function retSibling(e,n) { while(e && n){ if(n>0){ e=e.nextElementSibling; n--; }else{ e=e.previousElementSibling; n++; } } return e; }

4.封装函数insertAfter() 类似于 insertBefore()

5. 将目标节点内的节点顺序逆序

var p=document.getElementsByTagName('p')[0]; var div=document.getElementsByTagName('div')[0]; function reverse(a) { for (var i =a.children.length-2; i >=0; i--) { a.appendChild(a.children[i]) } }

创建

var div = document.createElement('div'); div.style.background="red"; div.style.width="100px"; div.style.height="100px"; document.body.appendChild(div);

转载于:https://www.cnblogs.com/nice2018/p/9847968.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)

js总结 （6） DOM操作 节点元素 遍历树

js总结（6） DOM操作节点元素遍历树