DOM

dom中文翻译是文档对象模型

dom的NodeList以及NameNodeMap和HTMLCollection都是动态的动态的动态的

node（节点）

父元素的firstChild； lastChild；childNode[7];
子元素的parentNode是父元素
node的nextSibiling---->下一个同级node
node<----下一个同级node的previousSibiling
当不存在是返回null

获取节点

就是我们写html是的body div input 等一堆标签在浏览器里的结构
document.getElementById（id只能设置一个元素）
document.getElementsByTagName() **
(得到的是数组**) so 如果想获得第一个元素[0] 同时数组就会有length这个属性，

var oli=oul.getElementsByTagName("li")
alert(oli[0]);
alert(oli[1]);

还有一个问题就是在mydiv.getElementsByTagName(“li”)获得的是所有的li如果有好多层就会返回所有的li元素（就是孙子辈的也获取到了，不光子元素的）

**.getElementsByClassName() **(获得的是数组)同上

创建修改对象

createElement()

var mydiv =document.creatElement("div");
mydiv.id="myid";
mydiv.className ="myclassname";
//这时新元素未添加到文档树里 需要下面
document.body.appendChild(mydiv);

. removeElement()
.image
.link

添加删除节点

appendChild(new)添加子节点

var returnNode =someNode.appendChild(newNode);
//添加到所有子元素的最后面
alert(someNode.lastChild==newNode); //ture

insertBefore( newNode,oldNode)
会插入newNode 到oldNode前面

var returnNode =someNode.insertChild(newNode,someNode.firstChild);
alert(newNode == newNode == someNode.firstNode);//ture

replaceChild(new,old)
removeChild(old)删除子节点

获取对象属性

getAttribute("width")
setAttribute("width")

div.setAttribute("id","otheId");
//其实直接
div.id="otherId"；
//也可以 唯一的区别就是setAttribute可以自定义一些特性就像
div.mycloth="牛仔裤"；就不好使

removeAttribute("width")

DOM2与DOM3对都dom进行里功能升级，（其实就是dom改进版本）

addEventListener
removeEventListerner
dispatchEvent

dom一致性检测

document.implementation.hasFeature("xml","2.0");

文档写入





    \
    "); //false
        document.write("

动态插入脚本

js

function loadScript(url) {
        var script=document.creatElement("script");
        script.type="text/javascript";
        script.scr=url;
        document.body.appendChild(script);
    }
loadScript(javascript.js);

css

function loadStyles(url) {
        var link=document.creatElement("link");
        link.rel="stylesheet";
        link.type="text/css";
        link.url=url;

        var head=document.getElementsByTagName('head')[0].appendChild(link);
    }
    loadStyles("style.css")

注意：

div.tagName==DIV; //不是div
所以最好element.tagName.toLowerCase()=="div"; 这样就对了

dom操作时有一个问题一定要注意就是dom是动态的

var divs=document.getElementsByTagName('div');
    for(var i=0;i

javascript DOM学习笔记

DOM