1. 指定的 ID 来返回元素:document.getElementById("ID");
注释:getElementById() 无法工作在 XML 中,这两种方法会像您提供任何你所需要的 HTML 元素;
2. 指定的标签名返回所有的元素:document.getElementsByTagName("标签名称");
注释:
1)可被用于任何的 HTML 元素,包括XML;
2)通过它们的索引号来访问这些 <p> 元素,索引号从 0 开始;
3. 通过使用 length 属性来循环遍历节点列表:
注释:
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
// do something with each paragraph
}
4. 在文档中进行“短距离的旅行”,parentNode、firstChild以及lastChild:
请看下面这个 HTML 片段:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),
而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
<tr> 是每个 <td>元 素的父节点(parentNode)。
注释:对 firstChild 最普遍的用法是访问某个元素的文本:var text=x.firstChild.nodeValue;
parentNode 属性常被用来改变文档的结构:假设您希望从文档中删除带有 id 为 "maindiv" 的节点
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
5.根节点
有两种特殊的文档属性可用来访问根节点:
- document.documentElement
- document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
6.
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
- nodeName(节点名称)
- nodeValue(节点值)
-
nodeType(节点类型)
nodeName
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是:
元素类型
节点类型
元素 |
1 |
属性 |
2 |
文本 |
3 |
注释 |
8 |
文档 |
9
|
分享到:
相关推荐
以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...
JavaScript操作DOM(Document Object Model)是网页开发中的核心技能之一,它允许我们动态地修改、添加和删除HTML或XML文档的结构与内容。DOM是一种树形结构,将页面元素视为对象,提供了丰富的接口来实现对这些对象...
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中,DOM(Document Object Model)是指文档对象模型,它是 HTML 和 XML 文档的编程接口。通过 DOM,我们可以动态地操作文档的结构、样式和...
JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构,将网页内容表示为节点和对象,每个元素、属性、文本甚至注释都是一个...
纯JavaScript操作DOM节点,通过动态JS创建元素标签,自定义元素的个数,并显示序号和对应的正则表达式验证和图片类型大小验证,,在前端用户姓名和性别多选框的取值已拿到,最后把后面的if else代码放开就可以了,...
更多关于 JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...
理解DOM节点、属性、事件和选择器是创建动态网页的关键,这使得开发者能够动态加载内容、更新UI、实现表单验证等功能。 书中还深入讨论了CSS选择器的使用,这是JavaScript与样式关联时的重要工具。通过掌握CSS选择...
实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...
JavaScript DOM(Document Object Model)操作是网页开发中的核心技能,它允许我们动态地改变、添加或删除HTML和XML文档的结构、内容和样式。在这个压缩包文件“javascript_DOM操作.rar”中,我们可以找到一个名为...
在JavaScript中,我们可以通过以下方式访问DOM节点: 1. `getElementById()`:通过元素的ID获取节点,这是最直接的方法。 2. `getElementsByClassName()`:返回具有特定类名的所有元素的NodeList。 3. `...
理解DOM树的结构以及如何通过JavaScript访问和操作节点至关重要。 3. **事件处理**:JavaScript可以响应用户的交互,如点击、鼠标移动等。了解如何绑定和处理事件是DOM编程中的关键技能。 4. **CSS操作**:通过DOM...
4. DOM节点类型:DOM树由各种节点组成,包括元素节点(Element)、文本节点(Text)、属性节点(Attribute)等。理解不同类型的节点及其属性和方法是进行DOM编程的基础。 5. DOM事件处理:JavaScript通过事件驱动...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...
通过DOM,我们可以用JavaScript来查找、访问、修改或删除文档的任何部分。DOM的主要接口有Node、Element、Document等,它们分别代表了节点、元素节点和整个文档。例如,`document.getElementById()` 可以找到具有...
尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript及其与DOM操作相关的高级编程技巧。下面将基于这些信息,尽可能地扩展和阐述相关知识点。 ### 一、JavaScript简介 ...
例如,`Node`接口是所有DOM节点的基类,提供了`appendChild()`、`removeChild()`等方法。`Element`接口扩展了`Node`,为HTML元素提供特定的方法,如`getAttribute()`和`setAttribute()`。还有`Document`接口,它是...
本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称,只读。 - **Node.nodeType**: 返回节点类型的常数值,...
DOM提供了一套API,包括节点操作(如创建、插入、删除节点)、事件处理(如点击、鼠标移动等)、属性访问等。例如,可以使用`appendChild()`方法在元素的末尾添加新子节点,`addEventListener()`来监听和响应用户...