W3-JavaScript基础知识三[JavaWeb]

1.案例一：在末尾添加节点　

　　1.1 步骤

　　（1）获取到ul标签

　　（2）创建li标签，createElement

　　（3）创建文本标签，createElement

　　（4）将文本添加到li下面，appendChild

　　（5）将li添加到ul的末尾，appendChild

　　1.2 实现

<ul id="ulid">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
 </ul>
 <input type="button" value="add" onclick="add1();"/>
  <script type="text/javascript">
    function add1(){
        //获取ul标签
        var ul1=document.getElementById("ulid");
        //创建li标签
        var li1=document.createElement("li");
        //创建文本
        var tex1=document.createTextNode("555");
        //把文本加入到li
        li1.appendChild(tex1);
        //把li加入到ul下面
        ul1.appendChild(li1);


    }
  </script>

2.元素对象（element对象）

　　2.1 获取element对象-通过document里面相应的方法获取

　　2.2方法

　　（1）获取属性getAttribute()方法

<input type="text" id="inputid" value="aaaa">
<script type="text/javascript">
//获取到input标签
var input1=document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
</script>

　　（2）设置属性setAttribute()方法

<input type="text" id="inputid" value="aaaa">
<script type="text/javascript">
var input1=document.getElementById("inputid");
alert(input1.getAttribute("class"));
input1.setAttribute("class","haha");
alert(input1.getAttribute("class"));
</script>

　　（3）删除属性 removeAttribute()方法

<input type="text" name="name1" id="inputid" value="aaaa">
 <script type="text/javascript">
var input1=document.getElementById("inputid");
alert(input1.getAttribute("name"));
input1.removeAttribute("name");
alert(input1.getAttribute("name"));
 </script>

　　　　-该属性不能删除value

　　2.3 获取标签下面的子标签

　　（1）使用属性childNodes，兼容性差

　　（2）唯一有效方法：使用getElementsByTagName()方法

<ul id="ulid1">
    <li>aaaaa</li>
    <li>bbbbb</li>
    <li>ccccc</li>
 </ul>
  <script type="text/javascript">
    //获取到ul下面的所有子标签(子元素)
    //获取ul标签
    var ul11=document.getElementById("ulid1");
    //获取ul下面的子标签
    var lis=ul11.getElementsByTagName("li");
    alert(lis.length);
  </script>

3. Node对象　　

　　3.1 属性一

　　（1）nodeName

　　（2）nodeType

　　（3）nodeValue

　　（4）节点与其对应的值　　

　　　　　-标签节点对应的值

 //获取标签对象
  var span1=document.getElementById("spanid");
  alert(span1.nodeType);//1
  alert(span1.nodeName);//SPAN
  alert(span1.nodeValue);//null

 　　　　-属性节点对应的值

 //属性
  var id1=span1.getAttributeNode("id");
  alert(id1.nodeType);//2
  alert(id1.nodeName);//id
  alert(id1.nodeValue);//spanid

　　　　-文本节点对应的值

  //获取文本
  var text1=span1.firstChild;
  alert(text1.nodeType);//3
  alert(text1.nodeName);//#text
  alert(text1.nodeValue);//哈哈呵呵

　　3.2 属性二

 <ul >
    <li>qqqqq</li>
    <li>wwwww</li>
 </ul>

　　（1）父节点

　　　　-ul是li的父节点

　　　　-parentNode

　　（2）子节点

　　　　-li是ul的子几点

　　　　-childNodes：获取指定节点的所有子节点，但是兼容性很差

　　　　-firstChild：获取第一个子节点

　　　　-lastChild：获取最后一个子节点

　　（3）同辈节点

　　　　-li直接关系是同辈节点

　　　　-nextSibling：返回一个给定节点的下一个兄弟节点

　　　　-previousSibling：返回一个给定节点的上一个兄弟节点

4. 操作dom树

　　4.1 appendChild方法

　　（1）添加子节点到末尾

　　（2）特点：类似于剪切黏贴的效果

　　4.2 insertBefore(NewNode,oldNode)方法

　　（1）在某个节点之前插入一个新的节点

　　（2）两个参数　

　　　　--要插入的节点

　　　　--在哪个节点之前插入

　　（3）步骤

　　　　-创建一个插入节点

　　　　　　--创建标签，创建文本，将文本添加到标签下面

function insert1(){
     /*
        1.获取到li13标签
        2.创建li
        3.创建文本
        4.把文本添加到li下面
        5.获取到ul
        6.把li添加到ul下面
     */
     //获取li3标签
     var li13=document.getElementById("li13");
     //创建li
     var li15=document.createElement("li");
     //创建文本
     var text15=document.createTextNode("董小宛");
     //把文本添加到li下面，appendChild
     li15.appendChild(text15);
     //获取到ul
     var ul21=document.getElementById("ulid21");
     //在貂蝉之前添加董小宛
     ul21.insertBefore(li15,li13);
    }

　　（4）没有insertAfter()方法

　　4.3 removeChild方法，删除节点

　　（1）通过父节点删除，自身不能执行

function remove1(){
    /*
        1.获取到li24标签
        2.获取父节点ul标签
        3.执行删除
    */
    var li24=document.getElementById("li24");
    var ulid31=document.getElementById("ulid31");
    //删除
    ulid31.removeChild(li24);

    }

　　4.4 replaceChild(newNode,oldNode)，替换节点

　　（1）通过父节点替换，两个参数（替换成的节点，被替换的节点）

function replace1(){
      /*
        1.获取到li
        2.创建标签li
        3.创建文本
        4.将文本添加到li下面
        5.获取标签ul
        6.执行替换
      */
      var li34=document.getElementById("li34");
      var li35=document.createElement("li35");
      var text1=document.createTextNode("张无忌");
      li35.appendChild(text1);
      var ulid41=document.getElementById("ulid41");
      ulid41.replaceChild(li35,li34);
    }

 　　4.5 cloneNode(boolean)，复制节点

　　（1）代码

 function copy1(){
  //把ul列表赋值到另外一个div中
    /*
        1.获取到ul
        2.指定复制方法 cloneNode方法复制 true
        3.把复制之后的内容方法div里面去
            获取到div
            appendChild方法
    */
     //获取ul
     var ulid41=document.getElementById("ulid41");
     //复制ul，放到类似剪切板里面
     var ulcopy=ulid41.cloneNode(true);
     //获取到div
     var divv=document.getElementById("divv");
     divv.appendChild(ulcopy);
  }

　　

5.innerHTML属性

　　5.1该属性不是dom的组成部分，但是大部分浏览器都支持

　　（1）作用1：获取文本内容　　　　

var span1=document.getElementById("sid");
alert(span1.innerHTML);

 　　（2）作用2：向标签里设置内容（可以是HTML代码）

//向div里面设置内容<h1> AAA</h1>
var div11=document.getElementById("div11");
//设置内容
div11.innerHTML="<h1> AAA</h1>";