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 相关文章推荐
解密效果
Jun 23 Javascript
js类 from qq
Nov 13 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
vue-cli3.0 特性解读
Apr 22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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
两个强悍的php 图像处理类1
2009/06/15 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
js格式化时间的方法
2015/12/18 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python中的日期时间处理详解
2016/11/17 Python
Python 多线程的实例详解
2017/09/07 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python如何实现转换URL详解
2019/07/02 Python
Python内存管理实例分析
2019/07/10 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
保安员岗位职责
2013/11/17 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
不假外出检讨书
2014/01/27 职场文书
大学老师推荐信
2014/02/25 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Python中request的基本使用解决乱码问题
2022/04/12 Python