700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Web前端开发笔记39——H5自定义属性 节点操作 父节点

Web前端开发笔记39——H5自定义属性 节点操作 父节点

时间:2022-04-29 07:03:31

相关推荐

Web前端开发笔记39——H5自定义属性 节点操作 父节点

1.自定义的方法:

同样,我们可以使用setAttribute来设置属性。

2.获取自定义属性的方法:

3.在我们之前的getElementById的方法和TagName以及query的方法较为麻烦,我们使用节点的操作来批量获取。

4.element.parentNode获取离element最近的父亲节点。如果获取不到,即返回null。

5.子节点获取:

但是,其会获取所有的子节点、元素节点、以及文本节点等等。

6.子节点的另一种方法:

<ul><li><div></div></li><li></li><li></li><li></li><li></li></ul><script>var child = document.querySelector('ul').children;console.log(child);</script>

上面的代码就可以直接提取其子节点,而不含子节点的其它节点。

7.同时我们可以获取子节点的同时,获取第一个和最后一个节点。

同时我们可以通过使用firstElementChild来获取第一个元素子节点,下面看集中不同的获取节点方式的不同。

<ul><li><div></div></li><li></li><li></li><li></li><li></li></ul><script>var getUl = document.querySelector('ul');var child = document.querySelector('ul').children;console.log(child);console.log(getUl.childNodes);console.log(getUl.firstChild);console.log(getUl.lastChild);console.log(getUl.firstElementChild);</script>

代码显示效果:

通过上面的效果图,我们就能很清楚的知道这几个获取子节点代码的区别了。

同样我们也有获取最后一个子元素节点的方法:lastElementChild。原理相同。

8.获取上/下一个兄弟节点:

9.同样也存在上一个/下一个兄弟元素节点:

如果在不支持的网页上,我们可以使用自定义函数来实现此功能。

10.创建节点:

11.添加节点:

12.节点中的链接跳转可以使用javascript:void(0)或javascript:;来组织链接跳转。

13.复制节点:

14.动态创建节点的方法:

15.父节点:

1. parentNode获取父节点

获取的是当前元素的直接父元素。parentNode是w3c的标准。

2. parentElement获取父节点

parentElement和parentNode一样,只是parentElement是ie的标准。

3. offsetParent获取所有父节点

一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。