02JavaScript动画DOM——获取节点、动态创建、添加、修改、删除、克隆元素

DOM对象

文档对象模型（Document Object Model，简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。HTML DOM 定义了所有HTML 元素的对象和属性，以及访问它们的方法,也就是说HTML DOM 是一套标准规则:关于如何获取、修改、添加或删除

HTML 元的,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,DOM独立于具体的编程语言,可以用于

任何语言，xml，js，vbs，c，java，php等等，DOM操作实际上就是增删改查换element,text,attribute,comment(元素,文本,属性,注释)，或者说对页面元素的增删改查操作以及获取，在JS中文档对象用关键字document表示

document对象常见的属性

lastModified    返回文档被最后修改的日期和时间。

referrer    返回载入当前文档的文档的URL,如果当前文档不是通过超链接访问的，则为空.(例:来到A页面的方法:直接在地址栏中输入A的地址,从B页面左击A的链接，跳转至A页面,从B页面右击点击A的链接，在新窗口中打开,从B页面右击点击A的链接，在新标签页中打开,拖动A的链接至地址栏,拖动A的链接至标签栏,使用浏览器的前进、后退按钮)// 拓展:这个属性包含在消息报头里发送到服务器,可以用作判断流量来源.

title  返回当前文档的标题。

URL  返回当前文档的 URL。

body 返回body节点对象

domain     可返回下载当前文档的服务器域

cookie       设置或返回与当前文档有关的所有缓存。

节点的获取

在获取节点时注释也会当做节点，常用的有两种，总共12种，

1、nextSibling：获取指定节点的下一个兄弟节点， 获取第一个ul的下一个兄弟节点，会将文本、空格、换行符都作为文本处理

2、nodeName：获取指定节点的节点名称

3、nodeType:获取指定节点的节点类型，返回值是number，1表示元素节点；3表示文本节点（#text），兼容问题：IE9、safari、chrome、firefox会将元素节点后面的换行部分作为文本节点处理，可以通过nodeType查看类型

4、 nextElementSibling:获取指定元素的的下一个兄弟元素，兼容问题：IE6、7、8不支持

// 兼容性判断
    if(uls[0].nextElementSibling){
        uls[0].nextElementSibling;
    }else{
        uls[0].nextSibling;
        if(uls[0].nextSibling.nodeType==1){
            // 表示为一个元素节点
        }
    }

5、previousSibling:获取指定节点的上一个兄弟节点

6、previousElementSibling:获取指定元素的上一个兄弟元素， 如果不存在相邻的兄弟元素，那么会返回null

7、lastchild：获取最后一个子节点
8、lastElementChild：获取最后一个子元素
9、firstChild:获取第一个子节点
10、firstElementChild：获取第一个子元素
11、childNodes:获取所有的子节点,是一个节点集合，返回空数组（不存在时）
12、children:获取所有的子元素节点，没有兼容问题，强力推荐！！！
13、parentNode:获取父节点，一定是一个元素节点

14、document.documentElement:获取Html元素
15、document.body:获取body元素
16、document.head:获取head元素

17、hasChildNodes():判断指定元素或节点是否存在子节点，返回布尔值，存在返回true不存在返回false

    元素节点            　　Node.ELEMENT_NODE(1)
    属性节点            　　Node.ATTRIBUTE_NODE(2)
    文本节点            　　Node.TEXT_NODE(3)
    CDATA节点             Node.CDATA_SECTION_NODE(4)
    实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
    实体名称节点        　　Node.ENTITY_NODE(6)
    处理指令节点        　　Node.PROCESSING_INSTRUCTION_NODE(7)
    注释节点            　 Node.COMMENT_NODE(8)
    文档节点            　 Node.DOCUMENT_NODE(9)
    文档类型节点        　　Node.DOCUMENT_TYPE_NODE(10)
    文档片段节点        　　Node.DOCUMENT_FRAGMENT_NODE(11)
    DTD声明节点            Node.NOTATION_NODE(12)

JS动态创建元素

createElement():创建指定类型的元素，需要一个参数，标签类型的字符串

添加元素

1、将元素添加到指定元素，appendChild():添加到指定元素的最后一个子级的末尾，document.body.appendChild(div);
    innerHTML可以为指定元素添加子元素，但是必须以标签字符串的形式赋值才可以，如果不希望覆盖之前的内容，就需要用+=赋值，document.body.innerHTML +="<div></div>";

2、将指定元素插入到指定元素的前面：

元素1.insertBefore(元素2,y元素3)(前面)、元素1.insertAfetr(元素2,y元素3)（后面）

元素1：元素2与元素3的父级

元素2：即将要插入的元素，元素2 如果已经存在于页面，那么会将它从原本的位置移动带元素3前/后面

元素3：插入参照元素2

删除元素

1、removeChild() 父级元素调用方法删除子级元素

2、remove() 子级元素调用方法，将自己从父级删除

3、innerHTML=""可以将指定元素所有子级元素删除

修改元素

replaceChild(new,old)  需要由old元素的父级来调用，可以用new来替换old,被替换的元素会被删除，元素位置的替换， 此方法有返回值会将被替换的元素返回

 克隆元素

cloneNode(boolean);   当参数为true时表示深克隆，false表示浅克隆

深克隆会将元素及内容都进行克隆，浅克隆只克隆元素，不会将内容克隆，克隆会将元素的属性一并克隆过来

setAttribute  removeAttribute  getAttribute

setAttribute(属性名,属性值)增加或修改元素属性值

getAttribute(属性名)获取元素属性值，可以获取元素的行间属性以及我们为元素添加的自定义属性；而通过.语法不能获取自定义属性的值

 removeAttribute(属性名)删除指定属性的值

clo2.setAttribute("myType","clone");

console.log(clo2.getAttribute("myType"))

clo2.removeAttribute("myType");