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的标准。

1	var p = document.getElementById("test").parentNode;

2. parentElement获取父节点

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

1	var p1 = document.getElementById("test").parentElement;

3. offsetParent获取所有父节点

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

1	var p2 = document.getElementById("test").offsetParent;