`

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

JavaScript 
阅读更多
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>
分享到：
| js学习之字符串中英文判断
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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的交互，提升...

    HTML 学习/css/js/javascript/dom 的学习资料

    **DOM** 是一种标准，用于表示 HTML 和 XML 文档的数据结构，并提供访问和修改这些文档的方法。 ##### DOM 树结构 - **文档**: `&lt;html&gt;` - **元素节点**: `&lt;body&gt;` - **文本节点**: "Hello World" ##### 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被表示为一棵由节点...

Magicbox
Global site tag (gtag.js) - Google Analytics