huangyongxing310
- 浏览: 495820 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
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 - 改变 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
分享到：
发表评论
-
定时调用函数功能实现
2021-06-11 10:26 1105<html> <head> & ... -
uniApiJs
2021-06-08 18:04 0//获取当前的地理位置、速度 function getLoca ... -
百度人脸识别
2021-05-21 16:11 362package com.gaojinsoft.htwy.y20 ... -
点击DIV触发上传文件的方法
2021-05-20 14:11 1197<div Style="float:left ... -
前端格式化工具与检测工具选择与使用
2021-05-10 20:26 719//工具安装前的准备与 ... -
indexedDb TEST
2021-03-24 08:36 506<!DOCTYPE html> <html& ... -
defineProperty Array push 监听
2020-10-31 15:16 464<!DOCTYPE html> <html ... -
weuiJsLayer.js
2020-07-24 09:56 263var weuiJsAlterMap = {}; f ... -
dataViewCommonJs
2020-05-09 17:00 356// var _elementIdToDataMap={} ... -
editorconfig配置
2020-03-28 20:36 461# https://editorconfig.org root ... -
commonJs
2020-03-26 21:25 361//本包使用需要先引入jquery //获取数组中的重复元素 ... -
setFormData
2019-12-20 22:30 0function setFormData(selector,d ... -
高德地图获取地址
2019-09-11 14:42 502高德帐号 135704744 <!doctype ... -
前端实现从剪贴板中获取数据
2019-05-16 14:01 1468//绑定在了body上，也可以绑定在其他可用元素行，但是不是所 ... -
js prototype原理与使用
2018-08-14 15:59 771js prototype原理与使用 prototype 使您 ... -
JS过滤树数据
2018-07-02 16:45 1018<!DOCTYPE html> <html ... -
javascript匿名函数与闭包
2016-09-27 14:10 429javascript匿名函数与闭包 ... -
JavaScript 作用域和作用域链
2016-09-27 09:08 516JavaScript 作用域和作用域链 JavaScrip ... -
Javascript函数
2016-09-28 15:00 500Javascript函数 定义函数 使用function关 ... -
Javascript执行步骤与顺序
2016-09-26 01:09 408Javascript执行步骤与顺序 1.JavaScript ...
相关推荐
JavaScript操作HTML DOM是一种核心技能，它允许开发者动态地更新、添加和删除网页内容。HTML DOM，全称为“文档对象模型”，是一种W3C标准，它为HTML和XHTML文档提供了一个结构化的表示，并且允许使用JavaScript或...
以下是一些关于JavaScript操作DOM的基本知识点： 1. 事件处理：在第一个例子中，`onclick`事件被用来在用户点击文档时改变页面背景颜色。JavaScript函数`ChangeColor()`被调用，通过`document.body.bgColor`设置...
本文将详细讲解如何使用JavaScript操作HTML DOM元素。 首先，要向HTML DOM添加新元素，你需要创建这个元素。例如，以下代码创建了一个新的`<p>`元素： ```javascript var para = document.createElement('p'); ```...
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构，将网页内容表示为节点和对象，每个元素、属性、文本甚至注释都是一个...
主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下
JavaScript操作DOM（Document Object Model）是网页开发中的核心技能之一，它允许我们动态地修改、添加和删除HTML或XML文档的结构与内容。DOM是一种树形结构，将页面元素视为对象，提供了丰富的接口来实现对这些对象...
### JavaScript HTML DOM ...通过以上内容的学习，我们不仅了解了 HTML DOM 的基本概念，还掌握了如何使用 JavaScript 来操作 DOM 中的元素，以及如何处理 DOM 查询结果。这为后续更高级的应用开发奠定了坚实的基础。
JavaScript DOM（Document Object Model）操作是网页开发中的核心技能，它允许我们动态地改变、添加或删除HTML和XML文档的结构、内容和样式。在这个压缩包文件“javascript_DOM操作.rar”中，我们可以找到一个名为...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
在 JavaScript 中，DOM 操作是指对 HTML 文档中的元素节点进行操作，包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的操作主要分为三步：（1）创建要添加的...
在DOM部分，书中详细讲解了DOM模型的层次结构，如何通过JavaScript访问和修改HTML元素，以及如何利用DOM事件来响应用户交互。理解DOM节点、属性、事件和选择器是创建动态网页的关键，这使得开发者能够动态加载内容、...
使用JavaScript操作DOM包括以下几个主要方面： 1. **创建元素**：使用 `document.createElement()` 创建新的HTML元素。 2. **添加/删除元素**：`appendChild()` 用于在DOM树中添加元素，`removeChild()` 则用于删除...
在JavaScript的世界里，HTML DOM（Document Object Model）是网页内容的一种结构化表示，它允许我们通过编程方式操纵HTML元素。本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作，包括查找、修改...
JavaScript实现HTML DOM增删改查操作的常见方法详解主要介绍了如何使用JavaScript对HTML文档对象模型（DOM）进行元素的查找、增加、删除和修改操作。这些操作是Web开发中非常基础且常用的功能，能够对网页元素进行...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...
尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript及其与DOM操作相关的高级编程技巧。下面将基于这些信息，尽可能地扩展和阐述相关知识点。 ### 一、JavaScript简介 ...
测试DOM API通常涉及编写JavaScript代码，以验证DOM操作是否按预期工作。这可能包括检查DOM元素的属性，监听和触发事件，以及修改文档的布局和样式。 #### DOM 元素引用 DOMElement接口包含了大量用于操作和检索...
DOM是Web开发中的核心组件，它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书的附录和源码提供了丰富的实践案例和深入的代码示例，帮助读者更好地理解和掌握JavaScript在DOM编程中的应用。...