DOM - 元素节点属性

元素节点属性

childNodes和firstChild和lastChild

1.childNodes  //获取当前元素节点的所有的子节点

举个小例子：

运行结果返回了一个节点列表：

节点列表是装有当前元素节点所有的子节点

我们可以看一下当前节点列表的长度：

运行结果为3：

这三个元素节点分别就是em、strong和文本内容

这时候就要涉及到我们之前学的DOM节点的三种类型

元素节点   文本节点   属性节点

这三个节点又有三个非常重要的属性：

分别为：nodeName、nodeType和nodeValue

对于这三个属性不同节点类型转换出来的效果不一样

例如：document.getElementById(‘box’).nodeType;  //返回1就为元素节点

★★★

childNodes包括的节点有元素节点和文本节点两种

举个小例子：

运行结果对应上面表应该为节点名称em，1和null

同样我们再来看一下文本节点：

运行结果为#text、3和文本内容

2.firstChild和lastChild  //找到当前元素节点的首位和末位

举个小例子：

运行结果为EM和strong

以上就是元素节点属性的方法

删除空白节点

我们还是拿上面的例子来看：

运行结果如下：

那么为什么我们改变div的书写格式后，会显示出5个元素节点呢？

我们来分析一下这5个节点：

1.div到em的空白

2.em

3.文本内容

4.strong

5.strong到div的空白

我们去给它进行回车、换行、tab键、空格等，它里面的元素节点就会有变化

因为我们不需要这些空白节点，我们如何将这些空白节点给去除呢？

在我们去除空白节点之前，先要识别空白节点

通过正则表达式来识别空白节点，这里先给大家写一下这次用到的正则表达式，后面会详细讲到。

/^\s+$/.test()

使用这个正则来进行验证，如果符合返回true，否则返回false

我们先来验证一下：

运行结果如下，空格时为true，有字符时为false：

我们这样就可以封装一个函数来进行删除空白节点：

运行结果为：

我们来返回一下文本类型nodeType未删除之前和删除之后分别有几个：

运行结果未删之前为3，删除之后为1如下：

从这里也可以看出，多出来的两个元素节点的类型为文本

但是我们上面的正则表达式 /^s+$/.test() 它原来数据上的子节点并没有发生变化，只是在调用函数时有效果，空白节点还依然存在。

对于这种情况我们就需要firstChild和lastChild这两个

因为这两种方法必须从父节点上删除空白节点，这时候就需要我们重新去封装函数

运行结果如下：

首先它的数量变为了3，它的firstChild变为了EM

注意：

这里删除数组元素的时候必须要倒叙删除！正着删除会混乱。

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web