JavaScript操作HTML元素和样式的方法详解


Posted in Javascript onOctober 21, 2015

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

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

例子解析:
这段代码创建新的<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 元素
这段代码向这个已有的元素追加新元素:
实例

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

实例解析
这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

找到 id="div1" 的元素:

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

找到 id="p1" 的 <p> 元素:

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

从父元素中删除子元素:

parent.removeChild(child);

lamp 如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

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

JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=new style
下面的例子会改变 <p> 元素的样式:
实例

<html>
<body>

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

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

<p>The paragraph above was changed by a script.</p>

</body>
</html>

本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:
实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>
Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
13个PHP函数超实用
Oct 21 #Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 #Javascript
JavaScript对象数组的排序处理方法
Oct 21 #Javascript
Javascript刷新窗口方法小结
Oct 21 #Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 #Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 #Javascript
JavaScript函数的调用以及参数传递
Oct 21 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
mysql 之通过配置文件链接数据库
2017/08/12 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
自我鉴定200字
2013/10/28 职场文书
公司承诺书范文
2014/05/19 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
php将xml转化对象的实例详解
2021/11/17 PHP
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android