首页 > 代码库 > 6.24
6.24
一、nodeList
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<li>你好</li>
<li>再见</li>
<li>再也不见</li>
</body>
<script>
var arr = [];
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
var li = list[i];
arr.push(li); //arr就是我们要的数组
}
</script>
</html>
二、parentNote
返回 <li> 元素的 parentNode（父节点）:
document.getElementById("item1").parentNode;
parentNode 属性以 Node 对象的形式返回指定节点的父节点,如果指定节点没有父节点，则返回 null。
有两种情况：
第一种（只有一个“爹”）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="parent">
<b id="child">My text</b>
</div>
</body>
<script>
alert(document.getElementById("child").parentNode.nodeName);
</script>
</html>
第二种：不只有一个“爹”：用 parentNode 不一定只找到一个"爹", "儿子"也可以成为"爹", 如下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>
</body>
<script>
alert(document.getElementById("child").parentNode.parentNode.nodeName);
</script>
</html>
三、firstChild
返回文档的首个子节点：document.firstChild;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div><p>123</p><p>456</p></div>
</body>
<script>
var first=document.getElementsByTagName(‘div‘)[0]
console.log(first.firstChild); //123
</script>
</html>
四、lastChild
lastChild 属性返回被选节点的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div><p>123</p><p>456</p></div>
</body>
<script>
var last=document.getElementsByTagName(‘div‘)[0]
console.log(last.lastChild); //456
>
</html>
五、previousSibling
返回列表项的 previousSibling（前一个同胞节点）：document.getElementById("item2").previousSibling;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id=‘in‘ type="text" /> <input type="button" value="http://www.mamicode.com/GO" onclick="aa(this);" />
</body>
<script>
function aa(s){
var ss = s.previousSibling;
console.log(ss);
while(ss &&ss.nodeType != 1){
console.log(‘The node is :‘+ss);
ss = ss.previousSibling;
}
console.log(ss.value);
}
</script>
</html>
六、.previousElementSibling
返回指定元素的前一个兄弟元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>
</body>
<script>
var el = document.getElementById(‘div-03‘).previousElementSibling;
document.write(‘<p>Siblings of div-03</p><ol>‘);
while (el) {
document.write(‘<li>‘ + el.nodeName + ‘</li>‘);
el = el.previousElementSibling;
}
document.write(‘</ol>‘); //1.LI 2LI 3DIV 4DIV
</script>
</html>
七、appendChild
appendChild() 方法向节点添加最后一个子节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="test"><li>Coffee</li><li>Tea</li></ul>
</body>
<script>
var node=document.createElement("LI"); //创建一个li节点
var textnode=document.createTextNode("Water"); //创建一个文本节点内容
node.appendChild(textnode); //将文本节点内容，添加到li节点里面
document.getElementById("test").appendChild(node); //将li节点，添加到test几点下面
//Coffee Tea Water
</script>
</html>
八、insertBefore appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级 节点 来说）。
insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。
向列表中插入一个项目；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="btns"><input type="button" value="http://www.mamicode.com/插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2" >2</p>
<p class="con2" >3</p>
</div>
</body>
<script>
var btn = document.getElementById("creatbtn");
btn.onclick = function() {
insertEle();
}
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
newNode.innerHTML = " This is a newcon ";
oTest.insertBefore(newNode,null); } //这里也可以用oTest.appendChild(newNode);
//结果为点插入元素后又多了" This is a newcon "这句话。
</script>
</html>
6.24