DOM对象查询练习

最新推荐文章于 2022-06-28 23:24:55 发布

x方

最新推荐文章于 2022-06-28 23:24:55 发布

阅读量217

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45778181/article/details/105927432

版权

本文介绍了DOM对象中节点的常用属性和方法，包括getElementsByTagName()、appendChild()、childNodes、firstChild、lastChild、parentNode、nextSibling、previousSibling、className以及innerHTML和innerText等，这些是JavaScript中进行DOM操作的关键知识点。

摘要由CSDN通过智能技术生成

节点的常用属性和方法

节点就是标签对象
方法：通过具体的元素节点调用
getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
   
		//1.查找#bj节点
		var btn01Ele = document.getElementById("btn01");
		btn01Ele.onclick = function () {
   
			alert(document.getElementById("bj").innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
   

			var lis = document.getElementsByTagName("li");
			alert(lis.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
   
			var names = document.getElementsByName("gender");
			alert(names.length)

		};
		//4.查找#city下所有li节点
		var btn04Ele

最低0.47元/天解锁文章

x方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象查询练习

节点的常用属性和方法节点就是标签对象方法：通过具体的元素节点调用getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点属性：childNodes 属性，获取当前节点的所有子节点firstChild 属性，获取当前节点的第一个子节点la...
复制链接

扫一扫