首页 > 代码库 > 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