Web开发 ☞ HTML DOM 用法

最新推荐文章于 2023-01-15 20:54:37 发布

Magic-ZYJ

最新推荐文章于 2023-01-15 20:54:37 发布

阅读量1.4k

点赞数 1

分类专栏： HTML DOM 文章标签： html dom

本文链接：https://blog.csdn.net/magicZYJ/article/details/51248532

版权

HTML DOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

一、属性
1、innerHTML 属性
可通过节点的 innerHTML 属性来访问文本节点的值。

元素节点 <title>，包含值为 "test" 的**文本节点**
<title>
test
</title>

2、nodeName 属性

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

3、nodeValue 属性

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

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

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

二、方法
1、getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素

2、getElementsByTagName() 方法
getElementsByTagName() 返回带有指定标签名的所有元素

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

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

</body>
</html>

三、操作
1、修改 HTML 元素
改变元素内容的最简答的方法是使用 innerHTML 属性

<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

2、改变 HTML 样式

<html>

<body>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<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");
para.style.color = "blue";
var node=document.createTextNode("This is new.");
para.appendChild(node);

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

</body>
</html>

这里写图片描述

you should know :

定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

Magic-ZYJ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web开发 ☞ HTML DOM 用法

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。一、属性 1、innerHTML 属性可通过节点的 innerHTML 属性来访问文本节点的值。元素节点 <title>，包含值为 "test" 的**文本节点**<title>test</title>2、nodeName 属性nodeName 属性规定节点的名称。nodeName 是只读的元素节点的 n
复制链接

扫一扫