尚硅谷js操纵dom元素-笔记02

第三个视频：

1、操作属性节点

注释：整个操纵的流程，首先通过getElementById("name");的方式，获取指定的元素节点，

再通过nameNode..value="尚硅谷"的方式，给元素进行赋值。

2、获取标签元素的子节点

注释：虽然通过这样的方式可以获得元素的子节点，但是不推介使用这种方式。

这个获取的值是8。注意这个为啥是8,因为这个方法不好，他将后面的空字符，也当成一个算进去了，所以不推介进行使用。

而是使用下面的方式进行获取

注解：这个直接获取，子元素的标签名，然后查找这个标签的长度。显示的值为4，这个是正确的值，这个是经常使用的。

找到对应的子节点，可以通过firstChild，lastChild属性获取，第一个节点和最后一个节点。

注释：这个显示的结果是，第一个节点是一个对象节点，而最后一个节点是一个文本节点。

3、 获取文本节点：

文本节点的解释：文本节点一定是元素节点的子节点。文本节点就是只包含文本的节点，

比如：

注释：通过弹窗的方式是读文本节点的值，然后通过bjTextNode.value的方式给其赋值。

4、实现功能，点击每个li的标签都会返回一个弹窗的响应，里面是其文本的值。

注释：首先获取了所有的li节点，然后通过for循环遍历，每一个li节点，再给每一个liNodes节点添加一个功能的函数，在这个函数中进行打印。

this为正在响应事件的节点。

5、点击每个li节点，如果li节点的文本值没有^^开头的，如果有，就去掉，如果没有就给他加上。

整个实现的过程有两个难点：

一、需要使用正则表达式对其进行判断，判断其是否是以^^开头、

二、需要调用replace方法除去指定的字符串。

正则表达式：/^\^{2}/g,g代表的是全局。

判断真假使用的方法是test。

替换的方法是replace、

注释：这个意思是，如果val符合reg的规则，前面开头是^^就会为真，replace会将前面的两个字符，替换为空的字符串。如果是假，会将^^添加到字符串的前面。

6、获取节点的属性值

注释：注意三个字段，nodeType，nodeName，nodeValue，前两个是只读的，而nodeValue是可以进行修改的。

但元素节点没有节点值，所以为空。

注释：属性名是name，nodeValue是userName

注意这个新方法，getAttributeNode();

注释：属性节点：全都有

注意：文本节点的nodeType的值是0,元素节点的nodeType是1,属性节点的nodeType值是2.

上面的文本节点的属性值是北京。