js学习之HTML DOM的访问和修改

最新推荐文章于 2022-05-29 09:52:18 发布

小熊️程序猿

最新推荐文章于 2022-05-29 09:52:18 发布

阅读量98

点赞数

分类专栏： js学习文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/lijie_insist/article/details/84691249

版权

js学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

[b][color=green][size=x-large]HTML DOM访问[/size][/color][/b]
[color=green][size=medium]坚持接着把w3chool上的实例学完,最近因为上班有点小忙都没按时的学习了
[/size][/color]
[color=indigo][size=medium]访问 HTML 元素（节点）

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

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

·通过使用 getElementById() 方法
·通过使用 getElementsByTagName() 方法
·通过使用 getElementsByClassName() 方法[/size][/color]

[b][color=indigo][size=medium]getElementById()通过ID查找HTML元素[/size][/color][/b]

[color=indigo][size=medium]获取 id="intro" 的元素：[/size][/color]

document.getElementById("intro");

[b]
[color=darkblue][size=medium]getElementsByTagName()通过标签查找所有HTML元素[/size][/color][/b]

[color=darkblue][size=medium]getElementsByTagName() 返回带有指定标签名的所有元素[/size][/color]

document.getElementsByTagName("p");

[color=green][size=medium]getElementByClassName()查找相同类名的所有HTML元素[/size][/color]


document.getElementByClassName("intro");范围类名为intro的所有元素列

[color=red][size=medium]ps:getElementByClassNameInternet Explorer 5,6,7,8 中无效[/size][/color]

[color=green][b][size=x-large]HTML DOM - 修改[/size][/b][/color]
[color=violet][size=medium]
修改 HTML DOM 意味着许多不同的方面：

·改变 HTML 内容
·改变 CSS 样式
·改变 HTML 属性
·创建新的 HTML 元素
·删除已有的 HTML 元素
·改变事件（处理程序）[/size][/color]

[color=brown][size=medium]创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性。

下面的例子改变一个 <p> 元素的 HTML 内容：[/size][/color]


<html>
<body>

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

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

</body>
</html>

[color=olive][size=medium]改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：[/size][/color]

<html>

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

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

</body>
</html>

[color=black][size=medium]创建新的 HTML 元素

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


<div id="d1">
<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("d1");
element.appendChild(para);
</script>

[color=olive][b][size=x-large]使用事件[/size][/b][/color]
[color=olive][size=medium]
HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

·在元素上点击
·加载页面
·改变输入字段[/size][/color]
[color=green][size=medium]下面两个例子在按钮被点击时改变 <body> 元素的背景色：[/size][/color]

<html>
<body>

<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />

</body>
</html>

[b][size=medium]创建新的 HTML 元素 - appendChild()[/size][/b]
[size=medium]如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。[/size]

[size=medium]创建了一个新的 <p> 元素：[/size]

var para=document.createElement("p");

[size=medium]如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：[/size]

var node=document.createTextNode("This is a new paragraph.");

[size=medium]然后必须向 <p> 元素追加文本节点：[/size]

para.appendChild(node);

[size=medium]最后，必须向已有元素追加这个新元素。这段代码查找到一个已有的元素：[/size]

var element=document.getElementById("div1");

[size=medium]这段代码向这个已存在的元素追加新元素：[/size]

element.appendChild(para);

[b][color=olive][size=medium]创建新的 HTML 元素 - insertBefore()[/size][/color][/b]

[color=brown][size=medium]上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：[/size][/color]

<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");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

[b][color=olive][size=large]删除已有的 HTML 元素[/size][/color][/b]

[color=olive][size=medium]如需删除 HTML 元素，您必须清楚该元素的父元素：[/size][/color]

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

[color=red][size=medium]
ps:能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：[/size][/color]

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

[b][size=large]替换 HTML 元素[/size][/b]
[size=medium]
如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：[/size]

<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 parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

小熊️程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习之HTML DOM的访问和修改

[b][color=green][size=x-large]HTML DOM访问[/size][/color][/b][color=green][size=medium]坚持接着把w3chool上的实例学完,最近因为上班有点小忙都没按时的学习了[/size][/color][color=indigo][size=medium]访问 HTML 元素（节点）访问 HTML 元素等...
复制链接

扫一扫

专栏目录