js 中的元素类型

1.元素特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

• getAttribute()：取得特性的值

var div = document.getElementById('myDiv');
alert(div.getAttribute('id'));

// 也可以获取自定义属性
<div self-defined="hello"> </div>
alert(div.getAttribute('self-defined'));

• setAttribute()：这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值。

div.setAttribute('id','demo')

• removeAttribute()：用于彻底删除元素的特性。

2.Element类型

特征：

• nodeType的值为1；

• nodeName的值为元素的标签名；

• nodeValue的值为null；

• parentNode可能是Document或Element；

• 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。

• getNamedItem(name)：返回nodeName属性等于name的节点；

• removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；

• setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；

• item(pos)：返回位于数字pos位置处的节点。

var id = document.createAttributes.getNamedItem('id').nodeValue;

简化

var ele=document.createAttribute['id'].nodeValue;

attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。

• 创建元素
  document.createElement()：创建新元素

var  div=document.createElement(div')；

• 元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

如果是IE来解析这些代码，那么<ul>元素会有3个子节点，分别是3个<li>元素。但如果是在其他浏览器中，<ul>元素都会有7个元素，包括3个<li>元素和4个文本节点（表示<li>元素之间的空白符）。

这意味着在执行某项操作以前，通常都要先检查一下nodeTpye属性.

 for (let i = 0; i < ele.length; i++) {
      if (ele[i].nodeType == 1) {
            // 执行代码
      }
 }

3. Text类型

特征：

• nodeType的值为3；

• nodeName的值为"#text"；

• nodeValue的值为节点所包含的文本；❏

• parentNode是一个Element；

• 不支持（没有）子节点。

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。

• appendData(text)：将text添加到节点的末尾。

• deleteData(offset, count)：从offset指定的位置开始删除count个字符。

• insertData(offset, text)：在offset指定的位置插入text。

• replaceData(offset, count, text)：用text替换从offset指定的位置开始到offset+count为止处的文本。

• splitText(offset)：从offset指定的位置将当前文本节点分成两个文本节点。

• substringData(offset, count)：提取从offset指定的位置开始到offset+count为止处的字符串。

除了这些方法之外，文本节点还有一个length属性，保存着节点中字符的数目。而且，nodeValue.length和data.length中也保存着同样的值。

操作方法：

• document.createTextNode()：创建新文本节点，这个方法接受一个参数——要插入节点中的文本

• normalize()：如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

-splitText()：将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值

4.Comment类型

特征：

• nodeType的值为8；

• nodeName的值为"#comment"；

• nodeValue的值是注释的内容；

• parentNode可能是Document或Element；

• 不支持（没有）子节点。

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。

• 注释节点可以通过其父节点来访问

• document.createComment()：并为其传递注释文本也可以创建注释节点