JavaScript-----DOM--获取元素方法合集

最新推荐文章于 2023-04-04 19:00:00 发布

Favour72

最新推荐文章于 2023-04-04 19:00:00 发布

阅读量172

点赞数 2

分类专栏： JavaScript 文章标签： javascript css3 大前端前端 html5

本文链接：https://blog.csdn.net/weixin_45904557/article/details/124286884

版权

JavaScript 专栏收录该内容

43 篇文章 5 订阅

订阅专栏

🍓什么是DOM

文档对象模型( Document Object Model),简称DOM,是W3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口

W3C定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式

🍓DOM树

文档:一个页面就是一个文档,DOM中用document表示

元素:页面中的所有标签都是元素,DOM中用element表示

节点:网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示

DOM把以上内容都看作是对象

🍓获取元素

🐇注意:

注意:页面加载要从上往下,因为要先有标签,才能获取标签

🐇根据ID获取

get 获取 element 元素 by通过驼峰命名法
参数:id是大小写敏感的字符串
返回一个特定的匹配ID的元素,如果找不到就返回null

		<div id="box">
			123
		</div>
	</body>
	<script type="text/javascript">
		var he = document.getElementById("box");
		console.log(he);//<div id="box">123</div>
		console.log(typeof he);//object

🐇根据标签名获取

一

document.getElementsByTagName("标签名")

//返回值是:获取过来的元素对象的集合 ,以伪数组的形式储存

		<ul>
			<li>我是JavaScript1</li>
			<li>我是JavaScript2</li>
			<li>我是JavaScript3</li>
			<li>我是JavaScript4</li>
			<li>我是JavaScript5</li>
			<li>我是JavaScript6</li>
		</ul>

		var list = document.getElementsByTagName("li");
		console.log(list);//HTMLCollection(6) [li, li, li, li, li, li]
		console.log(list[0]);//<li>我是JavaScript1</li>
		//想要依次打印里面的元素对象可以采用遍历的形式
		for(var i=0;i<list.length;i++){
			console.log(list[i]);//6个li
		}

注意: 不要忘记加s

//如果页面中只有一个li,返回的还是伪数组的形式
//如果页面中没有这个元素,返回的就是空的伪数组的形式

二

🐇获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementsByTagName("标签名")

父元素必须是单个对象(指明是哪一个元素对象),获取的时候不包括父元素自己

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<ul><li>我是JavaScript1</li>
			<li>我是JavaScript2</li>
		</ul>
		<ol id="ol">
			<li>我是html1</li>
			<li>我是html2</li>
			<li>我是html3</li>
			<li>我是html4</li>
		</ol>
	</body>
	<script type="text/javascript">
		//element.getElementsByTagName("标签名")
		// var ol=document.getElementsByTagName("ol");
		// console.log(ol[0].getElementsByTagName("li"));//HTMLCollection(4) [li, li, li, li]
		var ol=document.getElementById("ol");
		 console.log(ol.getElementsByTagName("li"));//HTMLCollection(4) [li, li, li, li]
	</script>
</html>

🐇根据类名获取

document.getElementsByClassName("类名")返回类名元素对象集合

		<div class="box"></div>
		<div class="box"></div>
		<div id="nav"></div>

		var box=document.getElementsByClassName("box")
		console.log(box);//HTMLCollection(2) [div.box, div.box]

🐇根据选择器获取

document.querySelector('选择器'); 根据选择器返回第一个元素对象

里面的选择器要加符号.就像css里一样

		<div class="box"></div>
		<div class="box"></div>
		<div id="nav"></div>
		<ul>
			<li>列表1</li>
			<li>列表二</li>
		</ul>
		var firstbox=document.querySelector('.box')
		console.log(firstbox)//<div class="box"></div>
		var nav=document.querySelector('#nav')
		console.log(nav)//<div id="nav"></div>
		var li =document.querySelector("li");
		console.log(li);//<li>列表1</li>

🐇 根据指定选择器返回所有元素对象集合

document.querySelectorAll("选择器") 根据指定选择器返回所有元素对象集合

		<div class="box"></div>
		<div class="box"></div>
		<div id="nav"></div>
		<ul>
			<li>列表1</li>
			<li>列表二</li>
		</ul>
	
		var all =document.querySelectorAll(".box")
		console.log(all);//NodeList(2) [div.box, div.box]
		
		var lis= document.querySelectorAll("li")
		console.log(lis)//NodeList(2) [li, li]

🐇获取body元素

document.body

		var body=document.body;
		console.log(body);//body 里面有很多元素和方法

🐇获取html元素

document.documentElement

		//获取html元素
		var html=document.documentElement;
		console.log(html);//html元素对象

Favour72

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-----DOM--获取元素方法合集

什么是DOM文档对象模型( Document Object Model),简称DOM,是W3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口W3C定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式DOM树文档:一个页面就是一个文档,DOM中用document表示元素:页面中的所有标签都是元素,DOM中用element表示节点:网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示DOM把以上内容都看作是对象
复制链接

扫一扫

专栏目录