[JavaScript]Dom_了解元素节点属性

最新推荐文章于 2024-07-23 09:22:07 发布
最新推荐文章于 2024-07-23 09:22:07 发布
阅读量154 收藏
点赞数
分类专栏： Javascript 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy1948/article/details/119952041
版权

childNodes 获取当前元素节点的所有子节点 ,包含两种节点类型
1、元素节点
2、文本节点
 
 
Dom 节点类型
元素节点 文本节点 属性节点
【注】 节点可以元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性
分别为：
nodeName节点名称、nodeType节点类型、和nodevalue节点的值
 
 
nodename：节点名称，只读
元素节点的nodeName与标签名相同
属性节点的nodeName是属性的名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

nodeValue属性:节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本自身
属性节点的nodevalue是属性的值

nodeType 属性:节点的类型，是只读的。
元素类型节点类型：
元素 1
属性 2
文本 3
注释 8
文档 9

 
firstChild 快速找到当前元素的第一个节点
lastChild 快速找到当前元素的最后一个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom_元素节点属性</title>
		<!-- childNodes 获取当前元素节点的所有子节点 ,包含两种节点类型
		1、元素节点
		2、文本节点
		-->
		<script type="text/javascript">
		window.onload=function(){
			var ox=document.getElementById("div1");
			 alert(ox.childNodes);输出“[object NodeList]” 装有当前元素节点的所有子节点
			alert(ox.childNodes.length);输出"4"
			
			/* Dom 节点类型
			 元素节点 文本节点  属性节点
			 【注】 节点可以元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性
			 分别为：
			 nodeName、nodeType、和nodevalue
			 
			 */
			
			alert(ox.childNodes[0].nodeName);EM
		    alert(ox.childNodes[0].nodeType);输出1
			alert(ox.childNodes[0].nodeValue);null
			
			
			 alert(ox.childNodes[1].nodeName);#text
			alert(ox.childNodes[1].nodeType);
			alert(ox.childNodes[1].nodeValue);
			
			
			/* 
			 firstChild 快速找到当前元素的第一个节点
			 lastChild  快速找到当前元素的最后一个节点
			 
			 */
			
			alert(ox.firstChild.nodeName);EM
			alert(ox.lastChild.nodeName);STRONG
		}
		</script>
	</head>
	<body>
		<div id="div1"><em>斜体</em>div文本内容<strong>粗体<></div>
	</body>
<ml>
初露微微
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM.zip_JavaScript dom_it
09-24
DOM将网页内容表示为一棵由节点组成的树形结构，这些节点可以是元素、属性、文本等。在“DOM.zip_JavaScript dom_it”这个压缩包中，包含的“DOM.chm”文件很可能是一个关于DOM的详细指南。 DOM的主要功能包括以下...
获得节点td 里面的值
bolink5的专栏
05-10 797
 在web开发中，有的时候需要获得一个表里面某行某列的值。    示例如下:  测试获得某行某列的值 function obtinId(id){  return document.getElementById(id); } function getTd(){  alert(obtinId(bolink).rows[1].cells[0].innerText); }     
DOM详解
m0_48224507的博客
06-10 5071
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
DOM概述
最新发布
ChangUng的博客
07-23 982
这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。该对象包含用户（在浏览器窗口中）访问过的 URL。3. 在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
什么是DOM和BOM？
热门推荐
似水流年QC的博客
06-01 1万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
♥️Javascript之DOM♥️
欢迎
09-10 2102
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
什么是DOM（超详细解释，建议收藏！！！）
weixin_58091723的博客
08-25 6388
元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。所有的节点和最终的树状结构，都有规范的对外接口。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。文档里面最高的HTML标签，一般是，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
示例4：操作节点属性.rar_javascript操作节点属性
09-20
理解并熟练掌握JavaScript操作DOM节点属性是成为合格前端开发者的关键技能之一。 通过示例4：操作节点属性的压缩包文件，你将能够深入学习这些概念，并通过实际代码示例进行实践，从而更好地理解和应用到自己的项目...
JavaScript之DOM_动力节点Java学院整理
10-19
- document.getElementsByClassName()：根据元素的class属性获取一组元素节点。返回的也是HTMLCollection对象。 - document.querySelector()：使用CSS选择器获取页面上第一个匹配的元素节点。 - document....
DOM 简介 | 深入了解DOM
青春木鱼的博客
09-05 4725
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
Dom详细讲解
qq_51986661的博客
11-25 6845
文档对象模型，英文全称为Document Object Model，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。D：Document，文档，表示的整个Html的网页文档O：Object, 对象，将网页的每一部分（标签）转换为每一个对象M：Model，模型，使用模型来表示对象之间的关系，方便我们获取。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来，让脚本来操作页面，使
DOM是什么（DOM的节点类型）
hulin的博客
05-10 2828
DOM是什么
DOM 初学者指南
2201_75715995的博客
12-28 2785
DOM（Document Object Model——文档对象模型），可以简单理解为浏览器创建的节点树，每个节点有自己的属性和方法，可以通过 JavaScript 来操作这些属性、调用这些方法。操作 DOM 的能力是 JavaScript 最独特和有用的特性之一。下图是 DOM 树的视觉表示。document 对象是 DOM 的核心/基础，执行任何形式的 DOM 操作都要访问 document 对象。根元素html是 document 对象的子节点。下一行是body和head。
DOM（文档对象模型）
m0_64694920的博客
06-23 1781
目录一.DOM概述二.DOM操作三.DOM事件四.总结1.DOM简介DOM（文档对象模型），用于将HTML文档描述成文档对象，该对象被组织成由一个个节点组成的树形结构。树中节点有元素节点，属性节点，文本节点等。节点之间存在父子，兄弟等层级关系，每个节点都有自己的名称，类型以及其他一些属性。同时DOM提供了一系列节点操作相关的API，用于访问和处理元素。2.DOM作用DOM可以获取文档节点，例如获取某个节点的属性，遍历列表节点的内容，获得表单的输入值等。DOM获取节点后，还可以对节点的属性进行改变。DOM可以
HTML中DOM解析篇1--nodeType\nodeValue\nodeName
LeapMotion1的博客
10-10 422
1. 各DOM的定义和用法nodeType 属性返回以数字值返回指定节点的节点类型，类型共有12种，常用到的有3种， nodeType=1: 元素节点 nodeType=2: 属性节点 nodeType=3: 文本节点 针对不同节点类型，nodeValue和nodeName返回不同值：
Element属性与方法整理
林中路
07-14 4842
属性/方法名 描述 accessKey 为元素指定获取焦点的快捷键 align ？ ariaAtomic 指示辅助技术是否根据aria-relevant定义的通知显示全部或部分更改区域 ariaAutoComplete 反映了 aria-autocomplete属性的值，指示输入文本是否可触发自动完成功能 ariaBusy 反映了 aria-busy属性的值，指示元素是否正在被修改，因为辅助技术可能希望等到修改完成后再将它们暴露给用户 ariaChecked 反映了 ar...
DOM基础知识
Mozarty的博客
04-22 1292
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
JavaScript DOM操作：元素、属性和文本节点详解
"本文主要探讨JavaScript中的DOM节点，包括元素节点、属性节点和文本节点，旨在帮助读者理解和掌握如何在JavaScript中操作HTML元素及其属性。" 在JavaScript中，DOM（Document Object Model）是一种用于表示HTML或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值