JavaScript学习笔记——节点

javascript-节点属性详解

根据 DOM，HTML 文档中的每个成分都是一个节点。

　　DOM 是这样规定的：

　　　　整个文档是一个文档节点
　　　　每个 HTML 标签是一个元素节点
　　　　包含在 HTML 元素中的文本是文本节点
　　　　每一个 HTML 属性是一个属性节点
　　　　注释属于注释节点

一、如何获得节点引用

1.旧的获取节点引用方式
　　getElementById()

//查找文档中的一个特定的元素，最有效的方法是 getElementById(),一定要有document
var outdiv=document.getElementById("outdiv");

var childs=outdiv.childNodes;
     
alert(childs.length);

getElementByTagName() 　　//返回带有指定标签名的对象集合

getElementByName()
*******************************************
劣势：
1.浪费内存
2.逻辑性不强
*******************************************

2.通过节点 关系属性 获得节点的引用
对象.parentNode 获得父节点的引用

    //父节点
     
     var innerdiv=document.getElementById("innerdiv");
     var father=innerdiv.parentNode;
     alert(father.nodeName);

对象.childNodes 获得子节点的集合

对象.firstChild 获得第一个子节点
对象.lastChild 获得最后个子节点

     //最后一个子节点
      
     var innerdiv=document.getElementById("innerdiv");
     var last=innerdiv.lastChild;
     alert(last.nodeName);

对象.nextSibling 获得下一个兄弟节点的引用

对象.previousSibling 获得上一个兄弟节点的引用

****************************************************************
劣势:兼容性不好。

FF会把例如</div>后面的所有的空白节点都读成一个子节点

IE会把最后一个空白节点读成子节点

****************************************************************

二、节点的信息(属性)

节点类型 节点名字 节点值
nodeType(数值) nodeName nodeValue

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2

元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null

        alert(outdiv.nodeType)     
       alert(document.nodeType)
       alert(document.nodeName)
        alert(document.nodeValue)

 

三、兼容性的方法

 

javascript-节点的增、删、改、查实例讲解

一、创建节点

　　1>创建元素节点
　　　　document.createElement("元素标签名");

   var elea=document.createElement("a");
     elea.href="#";
     elea.title="我是一个链接";
     elea.innerHTML="链接";
     elea.style.color="red";

    document.body.appendChild(elea);

 

　　2>创建属性节点
　　　　document.createAttribute("属性名");
　　　　对象.属性="属性值"
　　　　对象.setAttribute(属性名,属性值)
　　　　对象.getAttribute(属性名,属性值)
　　3>创建文本节点
　　　　对象.innerHTML="";

elea.innerHTML="链接";

　　　　document.createTextNode("文本");

    var h3text=document.createTextNode("后盾网视频教程");

 

二、追加到页面当中

　　父对象.appendChild(追加的对象) 插入到最后

document.body.appendChild(elea);

　　父对象.insertBefore(要插入的对象,之前的对象) 插入到最后

   var innerdiv=document.getElementById("innerdiv");
    var spans=innerdiv.firstChild;
    var eleh3=document.createElement("h3");
    var h3text=document.createTextNode("后盾网视频教程");
        eleh3.appendChild(h3text);
        innerdiv.insertBefore(eleh3,spans);

 

三、修改(替换)节点

　　父对象.replaceChild(要修改的对象,被修改的);

   innerdiv.replaceChild(elep,eleh3)

 

四、删除节点

　　父对象.removeChild(删除的对象)
　　如果确定要删除节点，最好也清空内存 对象=null;

   innerdiv.removeChild(elep)
   elep=null;
   alert(elep.innerHTML);