JS--JavaScript元素节点Element特性、访问元素（getElementById、getElementByTagName）、创建元素createElement

野性酷女 2021-08-14 02:17 526阅读 0赞

#### 元素节点 ####

Element类型是最常用的节点类型，它具有以下特征：

*  nodeType值为1
 *  nodeName值为元素的标签名称，也可以使用tagName属性。在HTML中，返回标签名始终为大写，在脚本中比较需要全部小写化：if(element.tagName.toLowerCase() == “div”)\{\}
 *  nodeValue值为null
 *  parentNode是Document或Element类型节点
 *  其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或者EntityReference

所有HTML元素都是HTMLElement类型或者其子类的实例，HTMLElement又是Element的子类，在继承Element类型时添加了一些属性，添加的这些属性分别对应每个HTML元素下列标准特性：

*  id：元素在文档中的唯一标识符
 *  title：有关元素的附加说明信息，一般通过工具提示显示出来
 *  lang：元素内容的语言编码，很少使用
 *  dir：语言方向，值为“ltr”（从左至右），“rtl”（从右至左），很少使用
 *  className：与元素的class特性对应，即为元素指定的CSS类样式

上述这些属性都可以用来取得或修改相应的特性值

#### 访问元素 ####

**1. getElementById()方法：**

document.getElementById(ID)
    //ID表示文档对应元素的id值。如果不存在指定元素，返回null。该方法只适用于document对象

示例：获得div的引用，然后查看节点类型等信息

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box">盒子</div>
    		<script type="text/javascript">
    			var box = document.getElementById("box"); //获得div引用
    			var info = "nodeName:" + box.nodeName; //获得节点名称
    			info += "\rnodeType:" + box.nodeType;//获得节点类型
    			info += "\rparentNode:" + box.parentNode.nodeName;//父节点名称
    			info += "\rchildNodes:" + box.childNodes[0].nodeName;//子节点名称
    			document.write(info);
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20190926095726973.png]  
**2. getElementByTagName()方法：**

document.getElementsByTagName(tagName)
    //tagName表示指定名称的标签，该方法返回值为一个节点集合，适用length属性可以获取集合中包含元素的个数，利用下标可以访问其中某个元素对象

示例：使用循环获取每个p元素，并设置class属性

var p = document.getElementsByTagName("p");
    for(var i = 0; i < p.length; i++){ 
    	p[i].setAttribute("class", "red");
    }

#### 创建元素 ####

createElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。

var element = document.createElement("tagName");
    //element表示新建元素的引用，tagName指定创建元素的标签名称

示例：下面代码在当前文档中创建了一个段落标记p，并把该段落的引用存储到变量p中。由于该变量表示一个元素节点，所以它的nodeType属性值等于1，而nodeName属性值等于p。

var p = document.createElement("p"); //创建段落元素
    var info = "nodeName：" + p.nodeName; //获取元素名称
    info += ",nodeType：" + p.nodeType;//获取元素类型，如果为1则表示元素节点
    alert(info);

注意：使用createElement()方法创建的新元素不会被自动添加到文档里，因为新元素还没有nodeParent属性，仅在JavaScript上下文中有效。如果要把这个元素添加到文档里，还需要使用appendChild()、insertBefore()或replaceChild()方法实现。

示例：将新创建的p元素增加到body元素下：

var p = document.createElement("p");
    document.body.appendChild(p);

[20190926095726973.png]: /images/20210813/fc40a6bb4d534882a6d78f76691ecb2c.png