HTML DOM相关知识点Ⅰ

㈠什么是DOM?

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM 定义了访问 HTML 和 XML 文档的标准:

"W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

 

㈡分类

W3C DOM 标准被分为 3 个不同的部分:

⑴核心 DOM - 针对任何结构化文档的标准模型

⑵XML DOM - 针对 XML 文档的标准模型

⑶HTML DOM - 针对 HTML 文档的标准模型

 

㈢什么是 HTML DOM?

HTML DOM 是:

⑴HTML 的标准对象模型

⑵HTML 的标准编程接口

⑶W3C 标准

HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法

换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

 

㈣HTML DOM 节点

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

 

1.根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

⑴整个文档是一个文档节点

⑵每个 HTML 元素是元素节点

⑶HTML 元素内的文本是文本节点

⑷每个 HTML 属性是属性节点

⑸注释是注释节点

 

2.HTML DOM 节点树

 

 3.节点父、子和同胞

节点树中的节点彼此拥有层级关系。

 

♠我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

⑴在节点树中,顶端节点被称为根(root)。

⑵每个节点都有父节点、除了根(它没有父节点)。

⑶一个节点可拥有任意数量的子节点。

⑷同胞是拥有相同父节点的节点。

 

♠具体事例:

<html>
  <head>
    <meta charset="utf-8">
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 课程1</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中:

  • <html> 节点没有父节点;它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且:

  • <html> 节点拥有两个子节点:<head> 和 <body>
  • <head> 节点拥有两个子节点:<meta> 与 <title> 节点
  • <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点

并且:

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

 

㈤HTML DOM 方法

?HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作。

?HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值。

 

★HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法:

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

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

 

★DOM对象方法:

 

㈥HTML DOM 属性

属性是节点(HTML 元素)的值,能够获取或设置。

 

⑴innerHTML 属性

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

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。包括<html>和<body>。

 

★示例:下面的代码获取 id="zq" 的 <p> 元素的 innerHTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="zq">早上起来,拥抱太阳。</p>

<script>
var mychar=document.getElementById("zq").innerHTML;
document.write(mychar);
</script>

</body>
</html>

效果图:

?在上面的例子中,getElementById 是一个方法,而 innerHTML 是属性。

 

⑵nodeValue 属性

★nodeValue 属性规定节点的值。

?元素节点的 nodeValue 是 undefined 或 null

?文本节点的 nodeValue 是文本本身

?属性节点的 nodeValue 是属性值

 

★nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注意: nodeName 始终包含 HTML 元素的大写字母标签名。

 

★ 示例:获取元素的值

下面的例子会取回 <p id="intro"> 标签的文本节点值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="intro">早睡早起,身体好。</p>

<script>
z=document.getElementById("intro");
document.write(z.firstChild.nodeValue);
</script>

</body>
</html>

效果图:

 

㈦HTML DOM 访问

访问 HTML 元素(节点)

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

 

★能够以不同的方式来访问 HTML 元素:

⑴通过使用 getElementById() 方法

⑵通过使用 getElementsByTagName() 方法

⑶通过使用 getElementsByClassName() 方法

 

1.getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素引用:

?语法 :node.getElementById("id");

?示例:下面的例子获取 id="intro" 的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="intro">我爱洗澡,皮肤好好。</p>
<p>这个实例演示了 <b>getElementById</b> 方法!</p>

<script>
x=document.getElementById("intro");
document.write("<p>段落的文本为: " + x.innerHTML + "</p>");
</script>

</body>
</html>

效果图:

 

2.getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

?语法:node.getElementsByTagName("tagname");

?示例1:下面的例子返回包含文档中所有 <p> 元素的列表:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>洗刷刷,洗刷刷,喔噢~</p>
<p>DOM 是非常有用的!</p>
<p>这个实例演示了 <b>getElementsByTagName</b> 方法的使用。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一个段落的文本为: " + x[0].innerHTML);
</script>

</body>
</html>

效果图:

 

?示例2:下面的例子返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>Hello World!</p>

<div id="main">
<p>时间过得总是让人猝不及防。</p>
<p>这个实例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一个段落为: " + x[0].innerHTML);
</script>

</body>
</html>

效果图:

3.The getElementsByClassName() Method

如果希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一个列表

 

 参考:https://www.runoob.com

原文地址:https://www.cnblogs.com/shihaiying/p/11420754.html

时间: 2024-10-10 14:16:07

HTML DOM相关知识点Ⅰ的相关文章

DOM相关知识点以及原型

DOM(增删改查): 查询 1.获取元素 1.1标准DOM API document.getElementById document.getElementsByTagName document.getElementsByName document.getElementsByClassName document.querySelectorAll 1.2亲属访问 1.3属性获取 getAttribute getAttributeNode 2.获取属性值 var attrNode=node.getAt

垂直搜索的相关知识点总结

垂直搜索引擎大体上需要以下技术 1.Spider 2.网页结构化信息抽取技术或元数据采集技术 3.分词.索引 4.其他信息处理技术 垂直搜索引擎的技术评估应从以下几点来判断 1.全面性 2.更新性 3.准确性 4.功能性 垂直搜索的进入门槛很低,但是竞争的门槛很高.没有专注的精神和精湛的技术是不行的.行业门户网站具备行业优势但他们又是没有技术优势的,绝对不要想像着招几个人就可以搞定垂直搜索的全部技术,作为一个需要持续改进可运营的产品而不是一个项目来说对技术的把握控制程度又是垂直搜索成功的重要因素

Jsoup代码解读之二-DOM相关对象

Jsoup代码解读之二-DOM相关对象 之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多.这篇文章会说明Jsoup的DOM结构,DOM的遍历方式.在下一篇文章,我会并结合这两个基础,分析一下Jsoup的HTML输出功能. DOM结构相关类 我们先来看看nodes包的类图: 这里可以看到,核心无疑是Node类. Node类是一个抽象类,它代表DOM树中的一个节点,它包含: 父节点parent

博客6:磁盘以及创建文件系统的相关知识点

1.linux磁盘的相关知识点  (1)I/O ports:I/O设备地址,实质上是一个缓冲器  (2)块设备:Block,存取单位是"块",例如:磁盘  (3)字符设备:char,存取单位是"字符",例如:键盘  (4)设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信(仅有元数据,而无数据)  (5)设备号码:              主设备号:major number,表示设备类型              次设备号:minor number

图像处理程序框架—MFC相关知识点

CDC:Windows使用与设备无关的图形设备环境(DC :Device Context) 进行显示 . MFC基础类库定义了设备环境对象类----CDC类.CDC与CGdiObject的关系 说道CDC类就不能不提一下GdiObject---图形对象类. 在Windows应用程序中,设备环境与图形对象共同工作,协同完成绘图显示工作.就像画家绘画一样,设备环境好比是画家的画布,图形对象好比是画家的画笔.用画笔在画布上绘画,不同的画笔将画出不同的画来.选择合适的图形对象和绘图对象,才能按照要求完成

libgdx相关知识点

Gdx.graphics.setContinuousRendering(false); 设置图像为非连续自动渲染. libgdx相关知识点,布布扣,bubuko.com

Android开发涉及有点概念&amp;相关知识点(待写)

前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由于Android是基于Linux,而Linux又是用c山寨Unix的,但是为什么Android不用开发App,其实我也不懂,我想可能是java比较简单. 同样的,IOS为啥没用java,这个我也想可能是因为IOS是封闭的吧..晕,又废话了..好,开始吧,不过这次很多要查资料了,很多名词.单词不会啊! 首先还

&lt;c:url&gt;标签相关知识点

一. <c:url>标签的作用主要用来产生字符串类型的url,而不是产生一个超链接,注意url(统一资源定位符)与超链接两个含义的区别. <c:url value="http://www.baidu.com" />在JSP页面中的输出形式如下: 可以看出来这在页面中就是个字符串,不是一个能点击的超链接. --------------------------------------------------------------------------------

学习记录013-NFS相关知识点

一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -arv 可以通过加载配置生效,也可以通过命令直接共享目录,越过/etc/exports,但是重启失效/usr/sbin/showmount 常用来在客户端,查看NFS配置及挂载结果的命令/var/lib/nfs/etab NFS配置文件的完整参数设定的文件注意:如果需要读写共享,一定要让本地目录被NF