`
huangyongxing310
  • 浏览: 494139 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JavaScript 操作 HTML DOM

阅读更多
JavaScript 操作 HTML DOM


JavaScript HTML DOM - 改变 HTML
改变 HTML 输出流
<script>
document.write(Date());
</script>


改变 HTML 内容
document.getElementById(id).innerHTML=new HTML

实例:
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>


改变 HTML 属性
document.getElementById(id).attribute=new value

实例:
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>


改变 HTML 样式
document.getElementById(id).style.property=new style

实例:
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>

实例:
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>


JavaScript HTML DOM 事件
onclick=JavaScript

实例:
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

实例:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>


HTML 事件属性
<button onclick="displayDate()">点击这里</button>

使用 HTML DOM 来分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>


onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

实例:
<body onload="checkCookies()">


onchange 事件
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件



JavaScript HTML DOM 元素(节点)

创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

实例:
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p"); //建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //先创建文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1"); //找到一个已有的元素
element.appendChild(para); //向这个已有的元素追加新元素
</script>


删除已有的 HTML 元素

实例:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1"); //找到 id="div1" 的元素
var child=document.getElementById("p1"); //找到 id="p1" 的 <p> 元素
parent.removeChild(child); //从父元素中删除子元素
</script>

DOM 需要清楚您需要删除的元素,以及它的父元素。
可以简化为:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);




参考原文:http://www.w3school.com.cn/js
分享到:
评论

相关推荐

    详解JavaScript操作HTML DOM的基本方式

    JavaScript操作HTML DOM是一种核心技能,它允许开发者动态地更新、添加和删除网页内容。HTML DOM,全称为“文档对象模型”,是一种W3C标准,它为HTML和XHTML文档提供了一个结构化的表示,并且允许使用JavaScript或...

    js操作htmlDom模型

    以下是一些关于JavaScript操作DOM的基本知识点: 1. 事件处理:在第一个例子中,`onclick`事件被用来在用户点击文档时改变页面背景颜色。JavaScript函数`ChangeColor()`被调用,通过`document.body.bgColor`设置...

    WEB开发 之 JavaScript HTML DOM 元素(节点).docx

    本文将详细讲解如何使用JavaScript操作HTML DOM元素。 首先,要向HTML DOM添加新元素,你需要创建这个元素。例如,以下代码创建了一个新的`&lt;p&gt;`元素: ```javascript var para = document.createElement('p'); ```...

    javascript_DOM操作

    JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构,将网页内容表示为节点和对象,每个元素、属性、文本甚至注释都是一个...

    JavaScript操作HTML DOM节点的基础教程

    主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下

    javascript 操作DOM

    JavaScript操作DOM(Document Object Model)是网页开发中的核心技能之一,它允许我们动态地修改、添加和删除HTML或XML文档的结构与内容。DOM是一种树形结构,将页面元素视为对象,提供了丰富的接口来实现对这些对象...

    JavaScript HTML DOM.docx

    ### JavaScript HTML DOM ...通过以上内容的学习,我们不仅了解了 HTML DOM 的基本概念,还掌握了如何使用 JavaScript 来操作 DOM 中的元素,以及如何处理 DOM 查询结果。这为后续更高级的应用开发奠定了坚实的基础。

    javascript_DOM操作.rar

    JavaScript DOM(Document Object Model)操作是网页开发中的核心技能,它允许我们动态地改变、添加或删除HTML和XML文档的结构、内容和样式。在这个压缩包文件“javascript_DOM操作.rar”中,我们可以找到一个名为...

    JavaScript中Dom操作实例详解.docx

    在 JavaScript 中,DOM 操作是指对 HTML 文档中的元素节点进行操作,包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的操作主要分为三步:(1)创建要添加的...

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

    这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素,进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示,它将网页内容...

    JavaScript_DOM编程艺术第二版(中文)

    在DOM部分,书中详细讲解了DOM模型的层次结构,如何通过JavaScript访问和修改HTML元素,以及如何利用DOM事件来响应用户交互。理解DOM节点、属性、事件和选择器是创建动态网页的关键,这使得开发者能够动态加载内容、...

    javascript+dom书籍

    使用JavaScript操作DOM包括以下几个主要方面: 1. **创建元素**:使用 `document.createElement()` 创建新的HTML元素。 2. **添加/删除元素**:`appendChild()` 用于在DOM树中添加元素,`removeChild()` 则用于删除...

    js_HTML_Dom操作练习

    在JavaScript的世界里,HTML DOM(Document Object Model)是网页内容的一种结构化表示,它允许我们通过编程方式操纵HTML元素。本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作,包括查找、修改...

    JavaScript 实现HTML DOM增删改查操作的常见方法详解

    JavaScript实现HTML DOM增删改查操作的常见方法详解主要介绍了如何使用JavaScript对HTML文档对象模型(DOM)进行元素的查找、增加、删除和修改操作。这些操作是Web开发中非常基础且常用的功能,能够对网页元素进行...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript及其与DOM操作相关的高级编程技巧。下面将基于这些信息,尽可能地扩展和阐述相关知识点。 ### 一、JavaScript简介 ...

    html dom 底层 javascript

    测试DOM API通常涉及编写JavaScript代码,以验证DOM操作是否按预期工作。这可能包括检查DOM元素的属性,监听和触发事件,以及修改文档的布局和样式。 #### DOM 元素引用 DOMElement接口包含了大量用于操作和检索...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书的附录和源码提供了丰富的实践案例和深入的代码示例,帮助读者更好地理解和掌握JavaScript在DOM编程中的应用。...

Global site tag (gtag.js) - Google Analytics