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 相关文章推荐
代码分析jQuery四种静态方法使用
Jul 23 Javascript
Underscore源码分析
Dec 30 Javascript
浅谈js原生拖放
Nov 21 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
React Component存在的几种形式详解
Nov 06 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
php简单复制文件的方法
2016/05/09 PHP
PDO::inTransaction讲解
2019/01/28 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jquery日历控件实现方法分享
2014/03/07 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
python实现简易云音乐播放器
2018/01/04 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
高考考python编程是真的吗
2020/07/20 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
什么是lambda函数
2013/09/17 面试题
致长跑运动员广播稿
2014/01/31 职场文书
小学语文课后反思精选
2014/04/25 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
本科毕业生求职信
2014/06/15 职场文书
建筑管理专业求职信
2014/07/28 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年物流工作总结
2014/11/25 职场文书
同学会邀请函模板
2015/01/30 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL