dom里面的node节点属性

乐之者java

于 2020-05-24 09:44:51 发布

阅读量587

点赞数 1

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106307264

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

html文档载入后是document对象，html文档中的每个html标签对象我们都可以访问到，这些标签对象在js中都被称为节点(Node).节点通过nodeType属性区分为三类：元素节点(Element)，文本节点，属性节点。不论哪种节点都具有Node对象的属性

属性	属性描述
nodeName	节点名称
nodeType	节点类型
nodeValue	节点的值
parentNode	父亲节点
childNodes	儿子节点
firstChild	第一个
lastChild	最后一个
attributes	属性数组
style	样式(css里的-变为驼峰法)

dom分为dom core api和dom html api，在core里，对于文档上的每个节点，不管是什么类型，都有上表中给出的Node对象定义的属性集，比如nodeName,nodeType,nodeValue,parentNode,childNodes,firstChild,lastChild,attributes，style等

nodename就是标签名，没有nodevalue
nodename就是属性名，nodevalue是属性值
nodename就是#text，nodevalue就是文本的内容

针对node节点的属性我也写了个案例，有如下一个html文档：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cookie</title>
</head>
<body>
<div id="div1" class="div1">
			<span id="span1">div1里面span的内容</span>
	</div>
</body>
</html>

再简单也不过了，javascript：

<script>
	var div1=document.getElementById("div1");
	console.log("---------元素节点---------");
	console.log(div1);
	console.log(div1.nodeType);
	console.log(div1.nodeName);
	console.log(div1.nodeValue);
	
	console.log("---------属性节点---------");
	console.log(div1.attributes);
	console.log(div1.attributes[0]);//attrs["id"]
	console.log(div1.attributes[0].nodeType);
		console.log(div1.attributes[0].nodeName);
			console.log(div1.attributes[0].nodeValue);
		
		console.log("---------文本节点---------");		
	console.log(div1.childNodes);
		console.log(div1.childNodes[1]);//span
		console.log(div1.childNodes[1].firstChild);	
		console.log(div1.childNodes[1].firstChild.nodeType);	
	console.log(div1.childNodes[1].firstChild.nodeName);	
	console.log(div1.childNodes[1].firstChild.nodeValue);		
    div1.childNodes[1].firstChild.nodeValue="AAA";
	div1.childNodes[1].innerHTML="BBB";
</script>

执行结果：

div1.childNodes[1].firstChild.nodeValue="AAA";将改变div内的内容为"AAA"，div1.childNodes[1].innerHTML="BBB";将改变div内容为BBB,因此页面上最终显示的是BBB。

乐之者java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom里面的node节点属性

html文档载入后是document对象，html文档中的每个html标签对象我们都可以访问到，这些标签对象在js中都被称为节点(Node).节点通过nodeType属性区分为三类：元素节点(Element)，文本节点，属性节点。不论哪种节点都具有Node对象的属性属性属性描述 nodeName 节点名称 nodeType 节点类型 nodeValue ...
复制链接

扫一扫