编程 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 相关文章推荐

js电信网通双线自动选择技巧

Nov 18 Javascript

JavaScript 检测浏览器和操作系统的脚本

Dec 26 Javascript

jQuery 幻灯片插件(带缩略图功能)

Jan 24 Javascript

淘宝网提供的国内NPM镜像简介和使用方法

Apr 17 Javascript

容易造成JavaScript内存泄露几个方面

Sep 04 Javascript

jQuery插件datepicker 日期连续选择

Jun 12 Javascript

jquery仿百度百科底部浮动导航特效

Aug 08 Javascript

用瀑布流的方式在网页上插入图片的简单实现方法

Sep 23 Javascript

JavaScript设计模式之单例模式详解

Jun 09 Javascript

React Native之prop-types进行属性确认详解

Dec 19 Javascript

微信小程序后端实现授权登录

Feb 24 Javascript

在HTML5 localStorage中存储对象的示例代码

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