您的位置：首页 > Web前端 > Node.js

Dom节点、方法、innerHTML 、nodeName/nodeValue、Dom修改

2017-03-08 20:05 483 查看

Dom节点

请看下面的 HTML 片段：

<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

Dom方法

方法是我们可以在节点（HTML 元素）上执行的动作。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

一些常用的 HTML DOM 方法：

getElementById()    返回带有指定 ID 的元素。
getElementsByTagName()  返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()    返回包含带有指定类名的所有元素的节点列表。
appendChild()   把新的子节点添加到指定节点。
removeChild()   删除子节点。
replaceChild()  替换子节点。
insertBefore()  在指定的子节点前面插入新的子节点。
createAttribute()   创建属性节点。
createElement()     创建元素节点。
createTextNode()    创建文本节点。
getAttribute()  返回指定的属性值。
setAttribute()  把指定属性设置或修改为指定的值。

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

举例如下：

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>

</body>
</html>

打印如下：

Hello World!

DOM 很有用！

本例演示 getElementsByTagName 方法。
div 中的第一段的文本: DOM 很有用！

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

创建 HTML 内容

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一段脚本改变了。</p>

</body>
</html>

输出如下：

New text!
上面的段落被一段脚本改变了。

改变 HTML 样式

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

Hello world!
Hello world!(蓝色的)

创建新的 HTML 元素

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

输出如下：

This is a paragraph.

This is another paragraph.

This is new.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航