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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
JQuery animate动画应用示例
May 14 jQuery
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
php Session存储到Redis的方法
2013/11/04 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JS分页效果示例
2013/10/11 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
创业计划书撰写原则
2014/01/25 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
免职通知
2015/04/23 职场文书
个人售房合同协议书
2016/03/21 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Windows server 2016服务器基本设置
2022/08/14 Servers