JavaScript学习笔记：节点的常用属性和方法

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量416 收藏
点赞数
分类专栏： JavaWeb 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49019244/article/details/121994273
版权

学习内容：节点的常用属性和方法

1. 方法：

通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode )方法，可以添加一个子节点，oChildNode

2. 属性

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节点
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.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 genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city节点.getElementsByTagName按标签名查子节点
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city获取所有子节点
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查询id为phone的节点
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查询id为bj的节点
			var bjObj = document.getElementById("bj");
			//2 bj节点获取父节点
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 获取id为android的节点
			// 通过android节点获取前面兄弟节点
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "国哥你真牛逼";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").innerText);
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
Serein_Pt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM对象查询练习
x²的博客
05-05 214
节点的常用属性和方法 节点就是标签对象 方法： 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点 属性： childNodes 属性，获取当前节点的所有子节点 firstChild 属性，获取当前节点的第一个子节点 la...
【JS】节点的获取和属性及使用
weixin_64615992的博客
03-13 1715
js节点的属性、获取（查找）、使用（创建、添加、删除、替换） `HTMLCollection` 与 `NodeList`
javascript学习笔记(十九) 节点的操作实现代码
12-07
本节要用到的html例子 代码如下: <ul id=”myList”> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点 代码如下: var div = document.createElement(“div”); //创建一个div元素 div.id = “myDiv”; //设置div的id div.className = “box”; //设置div的class 创建元素后还要把元素添加到文档树中
初学JavaScript：HTML DOM
lalala_dxf的博客
04-16 1110
DOM 简介 DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）（可以理解为对一个网页节点进行增删操作，一个节点可以是一对html标签，也可以是一对span标签）。 拆分理解下： • 文档 – 文档表示的就是整个的HTML网页文档，也就做结构树 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 文档对象
HTML DOM Document 对象 Element 对象node属性appendChild() 方法 insertBefore() 方法removeChild() 方法
super晓权的博客
11-06 1182
HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 Document 对象方法   方法 ...
xml节点操作（javascript）
12-21 4856
******************************************************************************************************************** DOMDocument 属性和方法   最近发现DOMDocument对象很重要,还有XMLHTTP也很重要注意大小写一定不能弄错.属性:  
JS常用Node属性和方法、Dom扩展+练习（给每个p标签设置索引属性）
weixin_43765641的博客
09-05 450
【代码】JS基础（通过设置属性方式，给每个p标签设置属性index为i， 点击时就可以获取自身的index索引值）
节点属性
weixin_44540773的博客
06-09 2201
节点属性 开发工具与关键技术： 作者：赵纯雨 班级：1804 撰写时间：2019.6.3 节点属性的三种方法和描述： 第一种：nodename：它返回一个字符串，其内容是给定节点的名字 第二种：nodetype：它返回的是一个整体，而这个数值代表的给定节点的类型，比如：元素类型、节点类型：元素:1、 属性:2、文本:3、注释:8、文档:9. 第三种：nodevalue：这所谓的就...
15.节点属性
weixin_34119545的博客
03-10 324
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型 一、nodeName 属性:节点的名称，是只读的。 1.元素节点的 nodeName 与标签名相同2.属性节点的 nodeName 是属性的名称3.文本节点的 nodeName ...
DOM中的node节点属性详解
weixin_44992737的博客
06-28 654
DOM中的node节点属性详解
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
JavaScript学习笔记之DOM基础操作实例小结
12-08
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html <body> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4...
JavaScript 学习笔记之基础中的基础
12-12
概要：javascript的组成、 各个组成部分的作用 、 一、javascript的组成  javascript  ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型） 1.1ECMAScript 　ECMAScript是通过ECMA-262标准化的脚本...
JavaScript 关于节点(记录学习)
qq_73451489的博客
04-07 867
在DOM中，每个容器，独立的元素或文本块都被看作为一个节点，节点是W3C DOM的基本构建块。当一个容器包含另一个容器时，对应节点之间有父子关系(父节点，子节点)。同时该节点数遵循HTML的结构化本质，如<html>元素包含<head>、<boyd>,前者又包含<title>，后者包含各种块元素等。DOM中定义了HTML文档中6中相关节点类型。所有支持W3C DOM的浏览器(IE5+,Mozl和Safari等)都实现了前三种常见的类型，其中Mozl实现了所有类型。节点类型表节点类型数值节点类型附加说明。
（一）尚硅谷javascript重点总结（6）【节点的常用属性和方法】【DOM 查询练习】
qq_41048982的博客
10-09 394
节点就是标签对象 DOM 查询练习 <!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">...
JavaScript中节点获取，节点的属性，如何操作节点
weixin_45268910的博客
08-04 3073
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。 一般来说在HTML中文档的节点分为三种： 1、元素节点 通过querySelector获取的节点就是元素节点 2、属性节点 通过getAttribute获取到的节点就是属性节点 3、文本节点 我们通过innerText获取到的就是文本节点 节点属性： nodeType节点类型 nodeN...
javascript中DOM元素节点查的操作方法。
cloudyless的博客
10-22 441
1.通过document对象的方法获取。 注意一下都是document的方法。 1.1.获取html节点的两种方法。 const html=document.documentElement const html=document.getElementsByTagName("html")[0] 1.2.获取body元素的两种方法。 const body=document.body const body=document.getElementsByTagName（"body"）[0] 1.3
获取节点的所有属性 neo4j
weixin_40739969的博客
10-16 8084
获取节点的所有属性 neo4j 其实是很简单的，我们用properties() 函数就可以获取这个节点的所有属性了。 获取节点的所有id号 neo4j 用的是id() 这个函数来获得的。 获取节点的label neo4j 用的是labels()函数 例子 比如： 我的代码查找TF的 Match (n:TF) return properties(n) AS properties,ID(n) as ...
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 404
在vue.config.js中配置关闭Uncaught runtime errors显示。
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值