首页 > 代码库 > DOM技术分享
DOM技术分享
1,nodeList代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>hello</p>
<p>好吧</p>
<p>愉快的 一天</p>
</body>
<script>
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
var y=x[1];
}
console.log(y);
</script>
</html>
2、parentNote
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="parent">
<b id="child">hello wrold</b>
</div>
</body>
<script>
console.log(document.getElementById("child").parentNode.nodeName);
</script>
</html>
3,firstChild
对 firstChild 最普遍的用法是访问某个元素的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>可以的</p>
<p>兄弟</p>
</div>
</body>
<script>
var first=document.getElementsByTagName(‘div‘)[0]
console.log(first.firstChild);
</script>
</html>
4、lastChild
lastChild 属性返回被选节点的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>下雨了</p>
<p>心好累</p>
</div>
</body>
<script>
var last=document.getElementsByTagName(‘div‘)[0]
console.log(last.lastChild);
</script>
</html>
5,previousSibling
语法：elementNode.previousSibling<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
function get_previoussibling(n)
{
var x=n.previousSibling;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.getElementsByTagName("author")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.childNodes[0].nodeValue);
var y=get_previoussibling(x);
document.write("<br />Previous sibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.childNodes[0].nodeValue);
/*以上代码的输出：
author = Giada De Laurentiis
Previous sibling: title = Everyday Italian*/
</script>
</html>
6,previousElementSibling
定义和用法
previousSibling 属性返回同一树层级中指定节点的前一个节点。
被返回的节点以 Node 对象的形式返回。
注释：如果没有 previousSibling 节点，则返回值是 null。
<!DOCTYPE html>
<html>
<body>
<p>列表示例：</p>
<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>
<p id="demo">请点击按钮来获得第二个列表项的前一个同胞的 id。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var itm=document.getElementById("item2");
var x=document.getElementById("demo");
x.innerHTML=itm.previousSibling.id;
}
</script>
<p><b>注释：</b>元素内的空白字符被视作文本，而文本被视作节点。</p>
<p>请在两个 <li> 元素之间添加空格，结果将是 "undefined"。</p>
</body>
</html>
7,appendChild
定义和用法
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表中添加项目。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
</body>
</html>
7,insertBefore
定义和用法
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。
您也可以使用 insertBefore 方法插入/移动已有元素。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>
</body>
</html>
DOM技术分享