十四、核心DOM（了解）

最新推荐文章于 2022-03-23 18:44:51 发布

℡想定下来

最新推荐文章于 2022-03-23 18:44:51 发布

阅读量191

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45256247/article/details/106910818

版权

节点关系-概念

根节点：在HTML文档中，一个HTML文档只有一个树根就是HTML节点

子节点：某一个节点的下一级节点

父节点：某一个节点的上一级节点

兄弟节点：多个子节点属于同一个父节点

空白节点：空格、回车、换行在（主浏览器有兼容性问题）

IE低版本浏览器：IE6、7、8
主流浏览器：IE9+、chrome、Firefox等等

节点关系-举例

**术语：**DOM的分层结构 / 树形结构 / 节点树
**概念：**在JS DOM中，HTML文档的层次结构被理解为倒立的树

（树根指HTML节点，树枝指其他节点）

节点操作**-语法

取子节点

节点.firstChild 获取第一个子节点
节点.lastChild 获取最后一个子节点
节点.children 获取所有子节点（不计算空白节点）
节点.childNodes 获取所有子节点（计算空白节点）

获取兄弟节点

节点.nextSibling 获取下一个兄弟节点
节点.previousSibling 获取上一个兄弟节点

获取父节点

节点.parentNode 获取父节点

获取文本节点的值

节点.nodeName 获取节点名称（获取当前是p节点，还是b节点等等）
节点.nodeValue 获取节点值（限文本节点）

节点属性

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

获取节点代码演示

用核心DOM操作节点的语法打印出sugar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>noodl111e</li>
		<li>fish</li>
		<li>sugar</li>
	</ul>
</body>
<script>
// document 

// 1. 获取HTML  
var htmlObj = document.lastChild
// 2. 获取BODY
var bodyObj = htmlObj.lastChild
// 3. 获取ul
var ulObj = bodyObj.firstChild
// 4. 最后一个li
var liObj = ulObj.lastChild
// 5. 获取文本节点 也就是内容  然后调用属性才行打印出来
var textObj = liObj.firstChild

alert(textObj.nodeValue)
</script>
</body>
</html>