编程 Javascript

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>

例子解析：
这段代码创建新的 元素：

var para=document.createElement("p");

如需向 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("This is a new paragraph.");

然后您必须向 元素追加这个文本节点：

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 文档含有拥有两个子节点（两个 元素）的 <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" 的 元素：

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
下面的例子会改变 元素的样式：
实例

<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操作HTML元素和样式的方法详解

- Author -

goldensun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

extjs form textfield的隐藏方法

Dec 29 Javascript

js AppendChild与insertBefore用法详细对比

Dec 16 Javascript

理解javascript中try...catch...finally

Dec 25 Javascript

jQuery动态加载css文件实现方法

Jun 15 Javascript

Bootstrap CSS组件之导航(nav)

Dec 17 Javascript

利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

Mar 15 Javascript

深入理解angular2启动项目步骤

Jul 15 Javascript

IScroll5实现下拉刷新上拉加载的功能实例

Aug 11 Javascript

javascript中的replace函数(带注释demo)

Jan 07 Javascript

微信小程序实现MUI数字输入框效果

Jan 31 Javascript

Vue项目中使用Vux的安装过程

May 01 Javascript

解决layui数据表格排序图标被超出的表头挤出去的问题

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