DOM更新中

最新推荐文章于 2023-03-31 10:29:24 发布

徐普通

最新推荐文章于 2023-03-31 10:29:24 发布

阅读量175

点赞数

分类专栏： biji 文章标签： JS DOM

本文链接：https://blog.csdn.net/weixin_44602489/article/details/88034894

版权

biji 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

DOM

document object model
文档从 html 到/html结束
对象
在这里插入图片描述

DOM节点的种类

元素节点

属性节点 id = ‘div1’
文本节点 div文本

获取元素节点

先给一个完整的环境，不包含script

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{width: 100px; height: 100px; background-color: red}
		</style>
	</head>
	<body>
		<div id = 'div1'></div>
		<ul id = 'ul1'>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
		</ul>
		<ol>
			<li>222222222</li>
			<li>222222222</li>
			<li>222222222</li>
		</ol>
	</body>
</html>

document.getElementById()

window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv);//[object HTMLDivElement]
}

只想去获取ul1下面的li标签

var oUl1 = docnment.getElementById("ul1");
var aLis = oUl1.getElementsByTagName("li");
alert(aLis.length);
}

document.getElementsByName()
node.getElementsByTagName()

window.onload = function(){
	var aLis = document.getElementsByTagName("li")
	alert(aLis); //[object HTMLCollection]
	alert(aLis.length);//8
	alert(aLis[5].innerHTML);//222222222
}