JavaScript HTML DOM

最新推荐文章于 2024-12-14 09:00:00 发布

原创最新推荐文章于 2024-12-14 09:00:00 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js 查找html元素

JavaScript&ECMAScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了HTML DOM的概念及其在JavaScript中的应用，包括如何通过不同方法访问、创建及修改HTML元素，为开发者提供了实用的操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM就是当网页被加载时，浏览器会创建页面的文档对象模型——Document Object Model

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

实例

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

实例

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>

nodeName 属性

nodeName 属性规定节点的名称。

nodeValue 属性

nodeValue 属性规定节点的值。

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

创建新的 HTML 元素 - appendChild()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
```
var x=document.getElementById("intro");
```
通过标签名找到 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
```
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
```
通过类名找到 HTML 元素 var t=document.getElementsByClassName("head");