DOM--笔记

什么是DOM？

JavaScript三个组成部分之一——文档对象模型（DOM）

官方定义：DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构，

目的其实就是为了能让js操作html元素而制定的一个规范

DOM树：可以更好的理解DOM

由结构图中我们可以看到，整个文档就是一个文档节点

标签 、标记、元素、属性都属于节点 

而每一个HMTL标签都是一个元素节点

标签中的文字则是文字节点

标签的属性是属性节点

一切都是节点……

访问节点 ：

getElementById()                     id访问节点

getElementsByTagName()        标签访问节点

var btn =document.getElementsByTagName("button")[0];//加[0]是因为数组不能直接被使用

getElementsByClassName()      类名访问节点，有兼容性问题（主流浏览器支持，ie 6 7 8 不认识）

类名访问节点的兼容写要熟练

节点访问关系：

父节点：parentNode

<script>
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
            this.parentNode.style.display = "none";
            // 关掉的是他的 父节点
        }
    }
</script>

兄弟节点（同级关系，用的很少）：

nextSibling  下一个兄弟     ie 6 7 8 认识

nextElementSibling  其他浏览器认识的

previousSibling  上一个兄弟    ie 6 7 8 认识

previousElementSibling    其他浏览器认识的

想要兼容    可以用     ||     合写

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";

必须先写 正常浏览器  后写  ie 6 7 8

子节点（不常用）

firstChild    第一个孩子  ie 6 7 8

firstElementChild  第一个孩子   正常浏览器 

varone.firstElementChild || one.firstChild    兼容写法

lastChild    第一个孩子  ie 6 7 8

lastElementChild    第一个孩子   正常浏览器

选出全部的子节点

childNodes    选出全部的子节点

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点

火狐谷歌等高本版（标准浏览器）会把换行也看做是子节点

利用  nodeType ==1   时才是元素节点     来获取元素节点

children   （重要）  选取所有的孩子 （只有元素节点）

这个用的更多，没有兼容性，唯一要注意的是

ie 6 7 8  包含 注释节点     这个要避免开

DOM节点的操作

新建节点   插入节点   删除节点   克隆节点 等等

创建节点

var div = document.creatElement(“li”);

上面的意思就是 生成一个新的  li 标签

插入节点

1. appendChild();    添加节点    append 添加的意思

意思：  添加孩子   放到盒子的 最后面

2. insertBefore(插入的节点，参照节点)   子节点  添加孩子

写满两个参数

dmo.insertBefore(test,childrens[0]);

放到了第一个孩子的前面 

如果第二个参数  为 null  则默认这新生成的盒子放到最后面

demo.insertBefore(test,null);

移除节点

removeChild()    孩子节点      

var da = document.getElementById("xiongda");
demo.removeChild(da);

克隆节点

cloneNode();

复制节点

括号里面可以跟参数  ， 如果 里面是 true  深层复制，除了复制本盒子，还复制子节点 

如果为 false  浅层复制   只复制   本节点  不复制 子节点

设置节点属性

1.  获取节点属性  

   getAttribute(属性)      获取属性    

   通过这个方法，可以得到 某些元素的  某些属性

alert(demo.getAttribute("title"));

   弹出对话框：    弹出title里面的内容

2. 设置节点属性

   setAttribute(“属性”,”值”);

   比如说，我们想要把一个 类名  改为  demo 

   div.setAttribute(“class”,”demo”);

3. 删除某个属性

    removeAttribute(“属性”);

    demo.removeAttribute(“title”) 

    这个盒子就没有title  属性 给删掉了  。

    A.appendChild(B);

    B 一定是 A 孩子      同时  b 放到了a 的里面  装到里面去了  最后面。   b 放到 a 里面

    A.insertBefore（B，C）    

    B C  都是 A 的孩子 

    把 b  放到  a 里面 ，但是 是 c 的前面

     待续。。。