JS—DOM操作

节点分为三类:
1.元素节点:标签<div></div>
2.文本节点:标签内的纯文本。
3.属性节点:标签内的属性，id或class

查找元素:
getElementById();参数传递一个元素的id值，这样就可以获取到该元素节点

DOM操作必须等待HTML文档加载完毕，才可以获取

怎样获取？
1.把<script>移后
HTMLDivElement表示Div的节点对象
IE是以COM实现的DOM，所以只会返回一个object
2.用onload事件来加载html
window.onload = function(){
    var box = document.getElementById('box'); //这里存放当网页所有内容都加载完毕后，再执行的代码
    alert(box);
}

一个页面只能允许一个id，表示唯一性。
getElementById建议区分大小写，以免不兼容。
如果是IE5.0-，不兼容getElementById，可以做个判断
window.onload = function(){
    if(document.getElementById){
       var box = document.getElementById('box');
       alert(box);
    }else{
        alert('您的浏览器不兼容，请更换~');
    }
}

//元素节点的属性
window.onload = function(){
    var box = document.getElementById('box');
    alert(box.tagName);  //获取这个元素节点的标签名
    alert(box.innerHTML);  //获取这个元素节点里的文本,纯文本不包含标签
    //innerHTMl获取的是这个元素的文本内容，而不是文本节点。
}
window.onload = function(){
    var box = document.getElementById('box');
    box.innerHTML = 'ssssss<strong>ffff</strong>'; //赋值，可以解析HTML，不是单纯的文本。
}

//HTML属性的属性
window.onload = function(){
    var box = document.getElementById('box');
    alert(box.id);  //获取这个元素节点id的属性值，注意不是属性节点
    alert(box.title);  //获取title属性的值
    alert(box.style);  //获取style属性对象
    alert(box.style.color;)  //获取style属性对象中color属性的值
    alert(box.className);  //获取class属性的值
}

//getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
window.onload = function(){
    var li = document.getElementsByTagName('li');  //参数传递一个标签名即可
    alert(li);  //返回一个数组集合，HTMLCollection
    alert(li.length);  //返回数组的数量
    alert(li[0]);  //HTMLElement,li的节点对象
    alert(li.item(0)); //同上，意义一致。HTMLElement
    alert(li[0].tagName);  //LI。获得元素的标签名
    alert(li[0].innerHTML);  //1
}

//返回body节点
window.onload = function(){
    var body = document.getElementsByTagName('body')[0];
    alert(body);  //返回HTMLBodyElement对象，body节点。
}

window.onload = function(){
    var all = document.getElementsByTagName('*');
    alert(all.length);  //火狐浏览器的firebug打开后，会自动创建一个div，所以会多算一个。
    alert(all[0].tagName);  //IE浏览器比火狐和谷歌多一个节点，是把<!文档声明也算进去了>
}

window.onload = function(){
    var input = document.getElementsByName('test')[0];
    alert(input.value);
    alert(input.checked);
};

//getAttribute() 方法返回指定属性名的属性值。
window.onload = function(){
    var box = document.getElementById('box');
    alert(box.getAttribute('style')); //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容
    alert(box.getAttribute('bbb')); //自定义可以兼容
    alert(box.getAttribute('class')); //IE无法获取
    alert(box.getAttribute('className')); //IE可以获取，非IE无法获取
    
    //跨浏览器获取className
    if(box.getAttribute('className')==null){
        alert(box.getAttribute('class'));
    }else{
        alert(box.getAttribute('className'));
    }
};

window.onload = function(){
    var box = document.getElementById('box');
    alert(box.onclick); //均返回函数式；
    alert(box.getAttribute('onclick')); //IE7以下会返回函数式，非IE返回字符串
};

window.onload = function(){
    var box = document.getElementById('box');
    //box.setAttribute('title','abc');  //创建一个属性和属性值
    //box.setAttribute('align','center');
    //box.setAttribute('bbb','cccc');
    box.setAttribute('style','color:green'); //IE7以下，style和onclick没有效果，避免使用
};

window.onload = function(){
    var box = document.getElementById('box');
    box.removeAttribute('style');  //IE6一下不支持removeAttribute
};

3.DOM节点
window.onload = function(){
    var box = document.getElementById('box');
    alert(box.nodeName);  //获取元素节点的标签名，和tagName等价
    alert(box.nodeType);  //获取元素节点的类型值，1
    alert(box.nodeValue);  //元素节点本身没有内容，所以是null
    //node本身把节点指针放在元素<div>上，也就是说，本身是没有value
    //如果要输出<div>中里面包含的文本内容，那么前面innerHTML
    alert(box.innerHTML);  //获取元素节点里面的文本内容
    //node只能获取当前节点的东西。
    //文本节点 不等于 文本内容
};

window.onload = function(){
    var box = document.getElementById('box');
    alert(box.childNodes); //NodeList集合，返回当前元素节点所有的子节点列表
    alert(box.childNodes.length); //3个子节点
    //3个子节点为：div<em>sss</em>fefef
    //第一个子节点为：div，这个节点称作为：文本节点
    //第二个子节点为：<em>sss</em>,这个节点称作为：元素节点
    //第三个子节点为：文本节点。
    alert(box.childNodes[0]); //Object Text表示一个文本节点对象
    alert(box.childNodes[0].nodeType); //3,表示文本节点
    alert(box.childNodes[0].nodeValue); //获取文本节点的文本内容
    alert(box.childNodes[0].innerHTML); //当前的文本，找不到里面的内容，undefined
    alert(box.childNodes[0].nodeName); //#text,文本节点没有标签名
};

//通过判断节点类型，来获取不同的输出
window.onload = function(){
    var box = document.getElementById('box');
    for(var i = 0; i<box.childNodes.length; i++){
        if(box.childNodes[i].nodeType === 1){
            alert('元素节点：'+box.childNodes[i].nodeName);
        }else if(box.childNodes[0].nodeType === 3){
            alert('文本节点：'+box.childNodes[i].nodeValue);
        }
    }
};

window.onload = function(){
    var pox = document.getElementById('pox');
    //pox.innerHTML = 'sssss';
    //pox.nodeValue = 'eefefeffef'; //没出错，但没有赋值上，nodeValue必须在当前节点上操作。
    pox.childNodes[0].nodeValue = 'dfdfdff'；
};

window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.childNodes[0].nodeValue); //获取第一个子节点
    //alert(box.childNodes[box.childNodes.length -1].nodeValue); //获取最后一个子节点
};

firstChild和lastChild属性
window.onload = function(){
    var box = document.getElementById('box');
    alert(box.firstChild.nodeValue); //获取第一个子节点
    alert(box.lastChild.nodeValue);  //获取最后一个子节点
};

//返回文档对象的根节点
window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.ownerDocument);    //HTMLDocument
    //alert(document);             //HTMLDocument
    alert(box.ownerDocument === document);
};

window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.parentNode);  //HTMLBodyElement
    //alert(box.firstChild.nextSibling); //HTMLSpanElement
    //alert(box.firstChild.nextSibling.nodeName); //下一个同级节点的标签名
    //alert(box.lastChild.previousSibling.nodeName); //上一个同级节点的标签名
};

//attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.attributes); //NamedNodeMap，集合数组，保存着这个元素节点的属性列表
    //alert(box.attributes.length);
    //alert(box.attributes[0]); //Attr,属性节点
    //alert(box.attributes[0].nodeType); //2,属性节点的类型值
    //alert(box.attributes[0].nodeValue); //box，第一个属性的属性值
    //lert(box.attributes[0].nodeName); //id,第一个属性的属性名
    //alert(box.attributes['title'].nodeValue); //遍历的时候，是从后向前的
};

window.onload = function(){
    var box = document.getElementById('box');
    alert(box.childNodes.length);  //有7个节点，包括了空白节点
};

window.onload = function(){
    var box = document.getElementById('box');
    alert(filterWhiteNode(box.childNodes).length);
};
//忽略空白字符
function filterWhiteNode(node){
    var ret=[];
    for(var i = 0; i<node.length; i++){
        if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){
            continue;
        }else{
            ret.push(node[i]);
        }
    }
    return ret;
}

//移除空白字符
function filterWhiteNode(node){
    for(var i = 0; i<node.childNodes.length; i++){
        if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
           node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    return node;
}

window.onload = function(){
    var box = document.getElementById('box');
    var p = document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去
    box.appendChild(p);  //将新节点p添加到id=box的div里的子节点列表的末尾上
    
    var text = document.createTextNode('sdfsdfsdf'); //创建一个文本节点
    p.appendChild(text);  //把文本添加到p里面
    box.appendChild(p);
    document.getElementsByTagName('body')[0].appendChild(p);
};

window.onload = function(){
    var box = document.getElementById('box');
    var p = document.createElement('p');
    //box.parentNode就是body
    box.parentNode.insertBefore(p,box); //在box的父节点添加一个p，就是在box前面添加一个元素节点
};


//向后添加节点
window.onload = function(){
    var box = document.getElementById('box');
    var p = document.createElement('p');
    insertAfter(p,box);
};
function insertAfter(newElement,targetElement){
    //得到父节点，就是body，但是不能直接使用body，如果层次较多，父节点不一定是body
    var parent = targetElement.parentNode;
    if(parent.lastChild === targetElement){
       alert('ss');
       parent.appendChild(newElement,targetElement)
    }else{
    //span节点的前面添加，可以用insertBefore，span节点可以用nextSibling获取
    parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

//浏览器的兼容
window.onload = function(){
    var body = document.getElementsByTagName('body')[0];
    if(BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7){
      var input = document.createElement("<input type=\"radio\" name=\"sex\">");
    }else{
      var input = document.createElement('input');
      input.setAttribute('type','radio');
      input.setAttribute('name','sex');
    }
    body.appendChild(input);
};

//replaceChild()方法用新节点替换某个子节点。
window.onload = function(){
    var span = document.getElementsByTagName('span')[0];
    var em = document.createElement('em');
    span.parentNode.replaceChild(em,span);
};


//cloneNode()方法克隆所有属性以及它们的值。
window.onload = function(){
    var box = document.getElementById('box');
    var clone = filterWhiteNode(box).firstChild.cloneNode(true);
    //克隆一个节点，如果是true就是把标签内的文本也克隆，如果是flase，只是克隆标签
    box.appendChild(clone);
};
//移除空白字符
function filterWhiteNode(node){
    for(var i = 0; i<node.childNodes.length; i++){
        if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
           node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    return node;
}



//removeChild()方法删除某个子节点。
window.onload = function(){
    var box = document.getElementById('box');
    //box.removeChild(filterWhiteNode(box).firstChild); //删除box第一个子节点
    box.parentNode.removeChild(box);//删除整个box
};
//移除空白字符
function filterWhiteNode(node){
    for(var i = 0; i<node.childNodes.length; i++){
        if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
           node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    return node;
}

 

window.onload = function(){
    //alert(Node); //IE不支持
    //if(xxx.nodeType === 1); //表示判断元素节点
    //if(xxx.nodeType === 3); //表示判断文本节点
    //alert(Node.ELEMENT_NODE); //表示元素节点的类型值
    //alert(Node.TEXT_NODE); //表示文本节点的类型值
    //if(xxx.nodeType === Node.ELEMENT_NODE);
    //if(xxx.nodeType === Node.TEXT_NODE);
    //if(xxx.nodeType === 元素);
    //if(xxx.nodeType === 文本);
};
if(typeof Node == 'undefined'){
    //创建一个全局Node
    window.Node={
        ELEMENT_NODE:1,
        TEXT_NODE:2
    };
}
alert(Node.ELEMENT_NODE);
alert(Node.TEXT_NODE);


window.onload = function(){
    //alert(document); //HTMLDocument
    //alert(document.nodeType); //9
    //alert(document.nodeValue); //null
    //alert(document.nodeName); //#document
    //alert(document.childNodes[0]); //DocumentType.IE理解为注释
    //alert(document.childNodes[0].nodeType); //10，IE为8
    //alert(document.childNodes[0].nodeName);//火狐为HTML，谷歌为html，IE为#document
    //alert(document.childNodes[1]); //HTMLHtmlElement
    //alert(document.childNodes[1].nodeType); //1
    //alert(document.childNodes[1].nodeName);
};


window.onload = function(){
    alert(document.documentElement); //HTMLHtmlElement
    alert(document.body.nodeName); //获取body
    alert(document.doctype); //DocumentType,IE会显示null
};


window.onload = function(){
    //alert(document.title);
    //document.title = 'box';
    alert(document.URL);
    alert(document.domain);
    alert(document.referrer);
    alert(document.images.length);
};


window.onload = function(){
    var box = document.getElementById('box');
    var text1 = document.createTextNode('Mr.');
    var text2 = document.createTextNode('Lee');
    box.appendChild(text1);
    box.appendChild(text2);
    box.normalize();  //合并同一级别的文本节点
    //alert(box.childNodes.length);
    alert(box.childNodes[0].nodeValue);
};


window.onload = function(){
    var box = document.getElementById('box');
    box.childNodes[0].splitText(3);  //把前三个字符分离成新节点
    alert(box.childNodes[0].nodeValue);
};


window.onload = function(){
    var box = document.getElementById('box');
    //box.childNodes[0].deleteData(0,3);  //把前三个字符删除
    //box.childNodes[0].insertData(0,'Hello!'); //添加字符串
    //box.childNodes[0].replaceData(0,2,'Miss'); //替换
    //alert(box.childNodes[0].substringData(0,2));
    //alert(box.childNodes[0].nodeValue);
};


window.onload = function(){
    //var box = document.getElementById('box');
    //alert(box.firstChild);  //Comment
    //alert(box.firstChild.nodeType); //8
    //alert(box.firstChild.nodeValue); //我是注释
    var c = document.getElementsByTagName('!');  //IE支持，其他不支持
    alert(c[1].nodeValue);
};


window.onload = function(){
    if(document.compatMode == 'CSS1Compat'){
        alert(document.documentElement.clientWidth);
    }else{
        alert(document.body.clientWidth);
    }
};


window.onload = function(){
    //document.getElementById('box').scrollIntoView(); //将指定的节点滚动到可见范围内
    var box = document.getElementById('box');
    //alert(box.childNodes.length);
    //alert(box.children.length);  //忽略掉了空白节点
    alert(box.children[0].nodeName);
};


window.onload = function(){
    var box = document.getElementById('box');
    var p = box.firstChild;
    //alert(box.contains(p));  //判断box是不是p的父节点
    //火狐旧版本不支持。新版本支持
    //safari2.x不支持，3.0以上才支持
    //很多更低的版本，提供的两个方案均不支持
    //alert(box.compareDocumentPosition(p)>16); //包含关系
    alert(contains(box,p));
};
//浏览器兼容
function contains(refNode,otherNode){
    if(typeof refNode.contains == 'undefined'){
        return refNode.contains(otherNode);
    }else if(typeof refNode.compareDocumentPosition == 'function'){
        return refNode.compareDocumentPosition(otherNode)>16;
    }
}


window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.innerText);  //获取文本并过滤HTML，直接删掉。
    //box.innerText = '<b>123</b>'; //赋值并转义HTML
    alert(box.textContent);
};


window.onload = function(){
    var box = document.getElementById('box');
    //alert(document.getElementById('box').innerHTML); //获取文本（不过滤HTML）
    //document.getElementById('box').innerHTML = '<b>123</b>'; //可解析HTML
    document.getElementById('box').innerHTML = "<script>alert('')</script>"; //不能执行
};


window.onload = function(){
    var box = document.getElementById('box');
    //alert(box.outerText);
    //box.outerHTML = '<b>123</b>';
    box.outerText = '<b>123</b>';
    alert(document.getElementById('box')); //null表明<div>这个标签被抹去
};