DOM2

最新推荐文章于 2023-03-16 23:38:15 发布

柒_lucky

最新推荐文章于 2023-03-16 23:38:15 发布

阅读量88

点赞数

分类专栏： JS 文章标签： js dom javascript

本文链接：https://blog.csdn.net/qq_48545546/article/details/112570695

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM

1. 结点属性

nodeType
- 只读
- 元素节点的 nodeType 返回值为 1
- 属性节点的 nodeType 返回值为 2
- 文本节点的 nodeType 返回值为 3
nodeName
- 只读
- 元素节点的 nodeName 与标签名相同，返回标签名为大写标签名
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
nodeValue
- 元素节点的 nodeValue 是 undefined 或 null
- 属性节点的 nodeValue 是属性值
- 文本节点的 nodeValue 是文本本身

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>我是标题1</h1>
	<a href="demo.html" id="list">我是超链接</a>
	<script type="text/javascript">
		var list=document.getElementById("list");
		var href=list.getAttributeNode('href')
		var text=list.firstChild;
		console.log("元素结点：");
		console.log(list);
		console.log(list.nodeType);
		console.log(list.nodeName);
		console.log(list.nodeValue);
		console.log("属性结点：");
		console.log(href);
		console.log(href.nodeType);
		console.log(href.nodeName);
		console.log(href.nodeValue);
		console.log("文本结点：");
		console.log(text);
		console.log(text.nodeType);
		console.log(text.nodeName);
		console.log(text.nodeValue);
	</script>
</body>
</html>

2. 结点操作

2.1 添加结点

生成结点
添加结点
- 向父节点的末尾添加：node.appendChild( newNode ) //父节点节点对象的一个方法
- 在已有子节点前插入一个新的子节点：node.insertBefore( new, old )

元素类型	生成节点	向父节点的末尾添加	向已有子节点前插入一个新节点
元素	document.createElement(“元素名称”)	node.appendChild(newNode)	node.insertBefore(new,old)
文本	document.createTextNode(“文本内容”)	同上	同上

	<ul>
		<li><a href="">我是列表第一项</a></li>
		<li><a href="">我是列表第二项</a></li>
		<li><a href="">我是列表第三项</a></li>
		<li><a href="">我是列表第五项</a></li>
	</ul>
	<script type="text/javascript">
		var node=document.getElementsByTagName("ul")[0];//注意**下标**
		var old=node.lastElementChild;//注意是最后一个**元素**子结点
		var list4=document.createElement("li");
		var a4=document.createElement("a");
		a4.setAttribute("href","");
		var text4=document.createTextNode("我是列表第四项");
		a4.appendChild(text4);
		list4.appendChild(a4);

		node.insertBefore(list4,old);
	</script>

2.2 删除元素、文本节点

parentNode.removeChild(childNode);
找到要删除元素的父节点，点前面写要删除元素的父节点，括号里面传入要删除的元素

2.3 修改元素/文本节点

oldNode.parentNode.replaceChild(newNode,oldNode)
旧节点的父节点
步骤：
- 创建新节点
- 找到旧节点
- 从父节点角度出发，使用replaceChild(新，旧)方法来替换

<ul id="is">
	<li>苹果</li>
	<li>香蕉</li>
	<li>西瓜</li>
</ul>

var textnode-document.createTextNode("荔枝");
var parent=document.getElementById("is").childodes[0];
var old=parent.childNodes[0];
parent.replaceChild(textnode,old);