`

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

阅读更多
HTML DOM访问
坚持接着把w3chool上的实例学完,最近因为上班有点小忙 都没按时的学习了

访问 HTML 元素(节点)

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

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

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



getElementById()通过ID查找HTML元素

获取 id="intro" 的元素:

document.getElementById("intro");


getElementsByTagName()通过标签查找所有HTML元素


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

document.getElementsByTagName("p");


getElementByClassName()查找相同类名的所有HTML元素
document.getElementByClassName("intro");范围类名为intro的所有元素列

ps:getElementByClassNameInternet Explorer 5,6,7,8 中无效

HTML DOM - 修改

修改 HTML DOM 意味着许多不同的方面:

    ·改变 HTML 内容
    ·改变 CSS 样式
    ·改变 HTML 属性
    ·创建新的 HTML 元素
    ·删除已有的 HTML 元素
    ·改变事件(处理程序)


创建 HTML 内容

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

下面的例子改变一个 <p> 元素的 HTML 内容:

<html>
<body>

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

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

</body>
</html>


改变 HTML 样式

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

下面的例子改变一个段落的 HTML 样式:


<html>

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

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

</body>
</html>


创建新的 HTML 元素

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

<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>


使用事件

HTML DOM 允许您在事件发生时执行代码。

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

    ·在元素上点击
    ·加载页面
    ·改变输入字段

下面两个例子在按钮被点击时改变 <body> 元素的背景色:

<html>
<body>

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

</body>
</html>


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

创建了一个新的 <p> 元素:
var para=document.createElement("p");


如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
var node=document.createTextNode("This is a new paragraph.");

然后必须向 <p> 元素追加文本节点:
para.appendChild(node);

最后,必须向已有元素追加这个新元素。这段代码查找到一个已有的元素:
var element=document.getElementById("div1");

这段代码向这个已存在的元素追加新元素:
element.appendChild(para);


创建新的 HTML 元素 - insertBefore()

上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此,您可以使用 insertBefore() 方法:

<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>


删除已有的 HTML 元素

如需删除 HTML 元素,您必须清楚该元素的父元素:

<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>


ps:能否在不引用父元素的情况下删除某个元素?

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

这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:


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


替换 HTML 元素

如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:


<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>
分享到:
评论

相关推荐

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    DOM是HTML和XML文档的一种结构化表示,它将网页内容转化为树形结构,使得JavaScript可以方便地访问和修改每个元素。在这个部分,我们将学习更多关于DOM元素操作的方法和技巧。 首先,`getElementById()`是获取特定...

    JS + HTML DOM

    【JS + HTML DOM】是关于JavaScript与HTML Document Object Model(文档对象模型)的结合使用,这一主题涵盖了如何通过JavaScript操作和动态更新HTML页面。在Web开发中,JavaScript是一种客户端脚本语言,它允许我们...

    html dom修改代码

    在处理HTML时,DOM提供了标准的方法来访问和操作页面中的元素。当我们面临HTML空行问题时,通常是因为在代码中出现了不必要的换行符或空格,这些空白在浏览器渲染时可能会影响布局或样式。本篇将深入探讨如何利用...

    html dom 底层 javascript

    ### HTML DOM 底层 JavaScript 知识点解析 ...总之,HTML DOM底层JavaScript的深入理解,不仅需要掌握DOM的基本概念和接口,还需要熟悉如何使用JavaScript与DOM进行交互,从而实现网页的动态功能和响应性设计。

    HTML DOM 参考手册 电子书

    每个HTML元素都是一个对象,这些对象可以通过JavaScript进行访问和修改。 2. **选择元素**:书中会讲解如何使用`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法来定位文档中的特定元素...

    使用Javascript和DOM Interfaces来处理HTML

    标题 "使用Javascript和DOM Interfaces来处理HTML" 涉及的核心技术是JavaScript和DOM(Document Object Model)接口在网页交互中的应用。JavaScript是一种广泛用于Web开发的脚本语言,而DOM则是HTML和XML文档的一种...

    前端开源库-htmldom

    `htmldom`的核心功能在于提供一个与浏览器环境中类似的DOM接口,使得开发者能够在Node.js后端对HTML文档进行解析、查询和修改。这极大地拓展了Node.js在处理HTML方面的潜力,使其不仅仅局限于服务器端的脚本执行,还...

    html,js,jquery,css,html dom参考手册

    例如,DOM(Document Object Model)允许通过JavaScript来访问和修改HTML元素,使页面具有响应式和动态效果。 jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。jQuery1.8.3_20121129....

    JavaScript获取HTML DOM节点元素的方法的总结

    以上方法为JavaScript操作DOM的基本方式,掌握它们能够帮助开发者灵活地访问和修改网页的各个部分。值得注意的是,不同的浏览器在实现DOM接口时可能存在差异,因此在进行跨浏览器开发时,应考虑使用像jQuery、...

    javascript+dom书籍

    通过DOM,我们可以用JavaScript来查找、访问、修改或删除文档的任何部分。DOM的主要接口有Node、Element、Document等,它们分别代表了节点、元素节点和整个文档。例如,`document.getElementById()` 可以找到具有...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    总的来说,这个“记录我的旅程之JavaScript DOM系列”涵盖了DOM操作的各个方面,包括元素的查找、创建、修改、删除、事件处理、动画和性能优化。通过实践这些例题,你将能更熟练地驾驭JavaScript与DOM的交互,提升...

    dom4j 英文api和htmldom教程下载

    - **特性**:HTML DOM允许通过JavaScript或其他脚本语言动态修改网页内容,实现交互性。它定义了如何访问和改变HTML元素、样式、属性和事件。 - **教程**:`HTML DOM 教程.CHM`是一个关于HTML DOM的教程,可以帮助...

    javaScript 生成DOM 对象(html标签).rar

    DOM是HTML和XML文档的一种结构化表示,它允许我们通过编程方式访问和修改文档内容。本教程将深入探讨如何使用JavaScript来生成和操作DOM对象,特别是涉及HTML标签。 首先,我们需要理解DOM的基本概念。DOM将HTML或...

    原生JS经典小项目-DOM练习

    DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在这个练习中,我们将主要关注如何使用原生JavaScript的数组方法来高效地处理DOM节点。 首先,让我们来看看DOM的基本概念。...

    js中DOM文档对象学习代码

    DOM文档对象是这个标准的核心,允许我们通过编程方式访问和修改页面元素。下面将详细介绍DOM文档对象以及如何在JavaScript中使用它。 首先,DOM是一个树形结构,每个HTML或XML文档都被解析为一个节点层级。根节点是...

    Js操控Html Dom

    DOM是HTML和XML文档的一种结构化表示,它允许通过编程方式访问和修改文档内容、样式以及结构。这篇博客文章可能探讨了如何利用Js有效地操控DOM元素,以实现动态网页交互。 在JavaScript中,DOM被表示为一棵由节点...

Global site tag (gtag.js) - Google Analytics