DOM操作指南-优快云博客

创建文本节点

我们可以用createElement创建新的元素，那我们要如何创建Text类型的节点呢，DOM提供给了我们createTextNode() 方法方便我们创建文本节点。这个方法接收一个参数（要创建的文本）

var text=document.createTextNode("hello,world");
document.body.appendChild(text)//页面被写入hello,world，但是只是单纯的文字节点

一般情况下每个元素只有一个文本子节点，但是可以通过createTextNode创建然后用appendChild添加，如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本节点会连起来显示，中间不会有空格。

通常碰见上面的情况我们会使用normalize()方法来拼合两个文本节点，

    var element=document.createElement("div");
    element.className="message";
    var textNode=document.createTextNode("hello,world!");
    element.appendChild(textNode);
    var secondElement=document.createTextNode("burning");
    element.appendChild(secondElement);
    console.log(element.childNodes.length);//2
    element.normalize();
    console.log(element.childNodes.length);//1
    console.log(element.childNodes[0].nodeValue)

既然有合并，那就一定有分割开来的方法啊，Text类型提供了一个splitText()方法。这个方法会将一个文本节点分成两个文本节点，按照指定的位置分割nodeValue值。

    var element=document.createElement("div");
    element.className="message";
    var textNode=document.createTextNode("hello,world!");
    element.appendChild(textNode);
    document.body.appendChild(element);
    var newNode=element.firstChild.splitText(2);
    alert(element.firstChild.nodeValue);//2
    alert(newNode.nodeValue);//llo,world!
    alert(element.childNodes.length)//2

创建动态脚本

    function getScript(url){
        var script=document.createElement("script");
        script.type="text/javascript";
        script.src=url;
        document.body.appendChild(script);
    }
    getScript("dom.js");

创建动态CSS

function getCss(url){
        var css=document.createElement("link");
        css.rel="stylesheet";
        css.type="text/css";
        css.href=url;
        var head=document.getElementsByTagName("head")[0];
        head.appendChild(css);
    }
    getCss("dom.css")

DOM的选择符API

querySelector() 方法接收一个CSS选择符，返回与该模式匹配的第一个字符，如果没有匹配都就返回null，选择方法与JQ类似

//通过标签名选择元素
var body=document.querySelector("body");
//通过id选择元素
var myDiv=document.quertSeletor("#myDiv");
//通过类名
var class=document.querySelector(".class1");
//取得类名为button的第一个Img元素
var img=document.querySelector("img.button");
//在这里和CSS选择到的元素不同，CSS如果是img.button则选择的是所有img且类名为button的元素,而通过querySelector选择到的是第一个img且类名为button的元素

querySelectorAll() 方法接受的参数与上面的方法相同，但是返回的是一个NodeList的实例。而我们通过getElementBy系列获取到的是一个动态的NodeList，使用get系列的有可能会导致无限循环的问题，而W3C规定querySelectorAll()获取到的是NodeList的一个快照，这样就能避免无限循环的问题，但是开销却大于get系列的方法

//取得所有<em>元素
var em=document.getElementBy("myDiv").querySelectorAll("em");
//去的所有类名为.selected的元素
var selected=document.querySelectorAll(".selected"）

我们在HTML中，可能使用多个类名，那我们在某系情况下需要添加或者删除类名，那怎么办呢？我们可以通过className 属性添加删除和替换类名。因此className中是一个字符串，所以只要把他们分开，删除在拼合，按照这样的思想我们就能够达到我们的目的

//删除b2类
<div class="a1 b2 c3"></div>
var div=document.getElementsByTagName("div")[0];
var text=div.className.split(/\s+/);
var pos=-1//-1表示不存在
for(var i=0;i<text.length;i++){
    if(text[i]=="b2"){
        pos=i;
        break;
    }
}
//除去类名
text.splice(pos,1);
//拼合
div.className=text.join(" ");

当然，在HTML5中，为了方便操作，它为我们提供了一个classList属性，这个属性与其他DOM集合类似，可以用item()方法也可以使用花括号方法

add(value)，将给定的字符串添加到列表中，如果存在则不添加
contains(value)，表示列表中是否存在给定的值，如果存在则返回true，不在则false
remove(value)，删除表中的字符串值
toggle(value)，如果列表中存在给定的值则删除，不存在则添加他.

//上面的代码可以用一行代替
div.classList.remove("b2");

DOM笔记（2）