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>nextSiblingtitle>
head>
<body>
<ul id="u1">   
            <li id="a">javascriptli>   
            <li id="b">jqueryli>   
            <li id="c">htmlli>   
        ul>   
        <ul id="u2">   
            <li id="d">css3li>   
            <li id="e">phpli>   
            <li id="f">javali>   
        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("
nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
      document.write("
已经是最后一个节点");      
    }
    
    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('
'+a.nodeName);
    document.write(" = ");
    document.write(a.innerHTML);
    
    var b = get_previousSibling(a);
    if(b!=null){
        document.write("
previousSibling:");
        document.write(b.nodeName);
        document.write(" = ");
        document.write(b.innerHTML);
    }else{
        document.write("已经是第一个元素！");
    }

script>
body>
html>

 插入节点 appendChild

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

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

<ul id="test"><li>JavaScriptli><li id="x1">HTMLli>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>htmlh1>
  <h1>phph1>
  <h1>javascripth1>
  <h1>jqueryh1>
  <h1>javah1>
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>

相关

标签