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

最新推荐文章于 2024-04-23 15:57:32 发布

原创最新推荐文章于 2024-04-23 15:57:32 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JSElement #创建元素 #访问元素

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了DOM中的元素节点(Element)特性，包括nodeType、nodeName、nodeValue等属性，以及如何使用getElementById、getElementsByTagName和createElement方法访问和创建HTML元素。此外，还探讨了如何利用这些方法进行页面元素的动态操作。

元素节点

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>

在这里插入图片描述
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);