Dom 操作

主要对象是文档对象 ,它一次包含其他几个子节点。每个单独元素在DOM树里面都有对应的存在表示。 文档对象是内建对象,具有很多的属性和方法,可以让我们能够访问和编辑网站页面。

创建DOM 元素

为了创建DOM的一个新元素,可以用createElement() 方法,带一个HTML标签名称作为参数, 并且返回一个特定类型的DOM节点。

<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col1">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">Create New</button>
<script>
function doIt() {
var newNode=document.createElement("LI");
var txt=document.createTextNode("Thursday");
newNode.appendChild(txt);
document.getElementById("days").appendChild(newNode);
}
</script>
</body>
</html>

上面的JavaScript 程序,首先创建一个LI节点,并且创建一个文本节点用来显示文本,将其追加到LI元素的节点上,最后将这个新节点追加的“days”上。

insertBefore(element, targetNode)

Node.insertBefore() 方法在引用节点的前面插入一个节点,并成为指定父节点的子节点。如果给定的子节点是一个已经存在的文档节点,insertBefore() 将它从当前位置移动到新位置。

<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">insertBefore</button>
<script>
function doIt() {
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Sunday");
newItem.appendChild(textnode);
var list = document.getElementById("days");
list.insertBefore(newItem, list.childNodes[0]);
}
</script>
</body>
</html>

appendChild(element)

Node.appendChild() 方法在一个指定父节点的子节点序列的尾部增加一个节点。如果给定的子节点是已经存在文档节点的引用, appendChild()将它从当前位置移动到新位置。

<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">appendChild</button>
<script>
function doIt() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Thursday");
node.appendChild(textnode);
document.getElementById("days").appendChild(node);
}
</script>
</body>
</html>

编辑节点

可以编辑DOM元素,包括改变它们的属性,内容,样式,甚至移动它们的位置。

编辑内容

元素属性innerHTML 用来获得或设置一个序列化的字符串表示,描述HTML元素内容。它不返回 HTML 标记。用这个方法设置内容的时候,将清除节点里的内容,并插入新的文本内容。

<html>
<body>
<p id="heading">这个将变化....</p>
<button onclick="doIt()">编辑上面的文本</button>
<script>
function doIt() {
var txt = document.getElementById('heading').innerHTML; alert(txt);
document.getElementById('heading').innerHTML = "Its Changed.....";
}
</script>
</body>
</html>

编辑样式

HTMLElement.style 属性获得一个元素内建的样式。当获取的时候,返回一个 CSSStyleDeclaration 对象,它包含这个元素全部样式属性的列表,包含内置的各个属性的值。

<html>
<body> <h1 id="heading">这将变为红色...<h1>
<button onclick="doIt()">编辑上面的文本</button>
<script>
function doIt() {
var txt = document.getElementById('heading').style.color="red";
}
</script>
</body>
</html>

移除节点

与编辑DOM类似, 可以删除目标节点。removeChild() 方法从父节点删除目标节点。

<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">Remove</button>
<script>
function doIt() {
var list = document.getElementById("days");
list.removeChild(list.childNodes[0]);
}
</script>
</body>
</html>

原文链接