dom小结

在dom中每个节点都是一个对象,有三个重要的属性:1.nodeName 2.nodeValue 3.nodeType

节点的名称是只读。

元素节点的名称与标签名相同。

属性节点的名称是属性的名称。

文本节点的名称 永远是#text。

文档节点的名称 永远是#document

 

节点的值

元素节点的值是 undefined 或 null。

文本节点的值是 文本本身。

属性节点的值是 属性的值。

 

节点的类型是只读的。常用的有以下几个类型:

 元素 :1  、属性:2 、文本:3 、注释:4 、文档:5。

 

node.childNodes  访问选定元素节点下的所有子节点的列表,返回的值可以看作一个数组。

node.parentNode 获取指定节点的父节点。

node.nextSibling 元素的后节点 , node.previousSibling 元素的前节点

 

IE会忽略节点间生成的空白节点(如:换行符号),而其他浏览器不会忽略。

 

eg:获取指定节点的上一个节点和下一个节点:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">   
            <li id="a">javascript</li>   
            <li id="b">jquery</li>   
            <li id="c">html</li>   
        </ul>   
        <ul id="u2">   
            <li id="d">css3</li>   
            <li id="e">php</li>   
            <li id="f">java</li>   
        </ul>   
<script type="text/javascript">
    function get_nextSibling(n){
        var x=n.nextSibling;
        while (x && x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
    }

    var x=document.getElementsByTagName("li")[0];
    document.write(x.nodeName);
    document.write(" = ");
    document.write(x.innerHTML);
    
    var y=get_nextSibling(x);
    
    if(y!=null){
        document.write("<br />nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
      document.write("<br>已经是最后一个节点");      
    }
    
    function get_previousSibling(m){
        a = m.previousSibling;
        while(a && a.nodeType!=1){
            a=a.previousSibling;
        }
        return a;
    }
    
    var a = document.getElementsByTagName("li")[5];
    document.write('<br>'+a.nodeName);
    document.write(" = ");
    document.write(a.innerHTML);
    
    var b = get_previousSibling(a);
    if(b!=null){
        document.write("<br>previousSibling:");
        document.write(b.nodeName);
        document.write(" = ");
        document.write(b.innerHTML);
    }else{
        document.write("已经是第一个元素!");
    }

</script>
</body>
</html>

 插入节点 appendChild

dom小结_第1张图片

另一种插入,添加到某个节点之前:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>

<ul id="test"><li>JavaScript</li><li id="x1">HTML</li></ul> 
 
<script type="text/javascript">

  var otest = document.getElementById("test");  
  var x = document.getElementById("x1");
  var y = document.createElement("li");
  y.innerHTML="php";
  otest.insertBefore(y,x);
</script> 

</body>
</html>

 删除节点:removeChild(); 把删除的子节点赋值给x,这个节点不在DOM数中,但是还在内存中,可以通过x完全删除对象。

var otest = document.getElementById("div");

var x = otest.removeChild(otest.childNodes[1]);

x = null;

eg:删除全部节点:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  for ( var i=0;i<content.childNodes.length;i++){
      
      if(content.childNodes[i].nodeType!=1){ continue; } else{
          content.removeChild(content.childNodes[i]);
      }
  }  
  
  var x = content.removeChild(content.childNodes[5]);
}
</script>

<button onclick="clearText()">清除节点内容</button>



</body>
</html>

 替换元素节点: repalceChild(new,old);当oldnode被建立时,所有与之相关的属性内容都将被移除。newnode必须先被建立。

创建元素节点: createElement(); 此方法返回一个element对象。要与appendChild()或insertBefore()方法联合使用,将元素显示在页面中。

添加一个button:

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script> 

使用setAttribute来设置属性:

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script> 

 

你可能感兴趣的:(dom小结)