首页 > 代码库 > 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技术分享