学了HTML DOM简介、方法、属性，查找HTML元素你会了吗

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好世界</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

注意：DOM 处理中的常见错误是希望元素节点包含文本。可通过节点的 innerHTML 属性来访问文本节点的值。（后面会讲）

HTML DOM方法和属性

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。(（比如添加或修改元素）。)

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值(（比如节点的名称或内容）)。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

常用的 HTML DOM 方法：

getElementById(id)：获取带有指定 id 的节点（元素），参数是id名

getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表。

appendChild(node)：插入新的子节点

removeChild(node)：删除子节点

replaceChild()：替换子节点。

insertBefore()：在指定的子节点前面插入新的子节点。

createAttribute()：创建属性节点。

createElement()：创建元素节点。

createTextNode()：创建文本节点。

getAttribute()：返回指定的属性值。是常用的节点属性获取方式之一。

setAttribute()：把指定属性设置或修改为指定的值。

常用的 HTML DOM 属性

innerHTML：节点（元素）的文本值

parentNode：节点（元素）的父节点

childNodes：节点（元素）的子节点

children：返回指定元素的子元素节点集合。（children是非标准属性,childNodes是标准属性。）

firstElementChild：返回指定元素的第一个子元素节点

lastElementChild：返回指定元素的最后一个子元素节点

attributes：节点（元素）的属性节点

nodeName：属性规定节点的名称。（nodeName 始终包含 HTML 元素的大写字母标签名。nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document）

nodeValue：规定节点的值。（元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue：是文本本身，属性节点的 nodeValue 是属性值）

nodeType：返回节点的类型。nodeType 是只读的。nodeType比较重要的节点类型有

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

查找HTML元素

通过查找HTML元素简单了解如何使用方法和和属性。获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素：document.getElementById(id)

通过标签名找到 HTML 元素：document.getElementsByTagName(name)

通过类名找到 HTML 元素：document.getElementsByClassName(name)

可在如下代码中查找id=“intro“中的元素并显示其内容，查找id=”container”的元素中第一个标签名为<p>的元素的内容。查找第一个class=”intro1”的元素的内容。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找元素</title>
<style type="text/css">
#container{}
.box{}
#intro{}
.intro1{}
</style>
</head>
<body>
<p>查找元素</p>
<div class="box" id="container">
<p id="intro">第一个P元素</p>
<p class="intro1">第二个P元素</p>
</div>
<script>
var x=document.getElementById("intro");
document.write("<p>通过id查找HTML元素:" x.innerHTML "</P><br/>");
// var m=document.getElementById("container");
// var y=m.getElementsByTagName("p");
var y=document.getElementById("container").getElementsByTagName("p");
document.write("<p>通过标签名查找HTML元素:" y[0].innerHTML "</p><br/>");
z=document.getElementsByClassName("intro1");
document.write("<p>通过类名查找HTML元素:" z[0].innerHTML "</p><br/>");
</script>
</body>
</html>

结果

注意：

1.查看元素内容用innterHTML。如下所示

document.getElementById(id).innerHTML

document.getElementsByTagName(name) .innerHTML

document.getElementsByClassName(name) .innerHTML

2.查看第几个元素的内容时用索引获取元素时所有元素集合中的第几个，如y[0]为第一个，y[1]是第二个这样依次。

3. document.write(text)是写入 HTML 输出流的方法。

4.查找标签名为p时需要先查找id=”container”的元素是因为要限制在盒子内，盒子外边也有p元素。

5.id的唯一性，通过document.getElementById(id)方法获取到的是在文档中第一个出现该id的DOM节点对象，该方法的结果只有一个。而另外两个方法不说明时是所有的，需要用索引确定获取的究竟是哪一个。

这篇好文章是转载于：学新通技术网

学了HTML DOM简介、方法、属性，查找HTML元素你会了吗

文章目录

前言

HTML DOM简介

什么是 DOM？

什么是 HTML DOM？

HTML DOM 节点树

HTML DOM方法和属性

常用的 HTML DOM 方法：

常用的 HTML DOM 属性

查找HTML元素

代码

结果

注意：

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐