DOM对象

DOM的核心理念：文档中的每个元素都可以转化为对象，又称之为节点。

将HTML和XML文档用对象模型表示，每个对象称之为DOM对象 dom对象又称之为dom节点

模型：用模型来表示对象之间的关系

节点类型：

documentType  文档类型节点

document :文档模型     

Text :文本节点             元素的文本内容

Element：元素节点      HTML的标签

Attribute：属性节点      标签的属性

comment：注释节点

documentFragment: 文档片段节点

获取DOM节点

全局的对象中window中有document属性表示整个文档

旧的获取节点的方法

document.body   获取body的元素节点

document.head  获取一个head的元素节点

document.liks  获取一个liks元素的节点

document.forms 获取页面上所有的form元素节点

共同点有，每个元素节点都有：

nodeName  节点名称

nodeValue  节点的值

modeType  节点的类型  数字表示

新的获取节点的方法：

document.getElementById('id名')  通过id属性获取元素节点 只返回第一个元素    实现高效 只能存在一个id名

document.getElementByclassName('类名')  通过类名属性获取元素节点 返回一个类数组

document.getElementByName('类名')  通过元素Name属性获取元素节点 返回一个类数组

document.getElementByTagName('标签名')  通过标签名获取元素节点  返回一个类数组

document.queryselectorAll('选择器')  通过选择器获取元素节点 返回一个类数组

document.queryselector('选择器')  通过选择器获取元素节点   只能获取一个元素节点

注意：document.getElementById() 执行效果最高  实现更新  id属性会自动转化为window属性

除了queryselectorAll() 不会更新外其他的获取节点的方法都是实时更新的，

除了Id节点，其他的都可以被其他元素节点对象直接调用找到当前的元素节点的后代元素

根据节点的关系获取节点

parentNode :获取当前元素的父元素的节点

previousSibling ：获取当前元素的上一个兄弟节点

nextSibling：获取当前元素的下一个兄弟节点

childNodes：获取当前元素的所有子节点  （注意：是子节点  包括元素节点和文本节点）

firstchild:获取第一个子节点   获取文本节点

lastchild:获取最后一个子节点 获取文本节点

attribute：获取所有的属性节点

根据节点的关系获取元素节点

parentElement :获取当前元素的父元素节点

previousElementSibling ：获取当前元素的上一个兄弟元素节点

nextElementSibling：获取当前元素的下一个兄弟元素的节点

children：获取当前元素的所有子元素节点  

firstElementchild:获取第一个子节点   获取文本元素节点

lastElementchild:获取最后一个子节点 获取文本元素节点

元素属性：

value属性属于表单元素中独有的属性可以节点使用

可识别属性：可以直接用 

属性名与js中的关键字冲突

class=>className   获取元素的class属性   for=>HTMLfor

自定义的属性：

不是元素本身可以使用的属性，可以给以后开发带来方便 HTML5建设自定义属性使用Data_*方便识别获取 作为指定的元素属性

在dom对象中添加了一个属性dataset.data-*;他是一个对象储存了所有自定义的对象属性

元素的结构重构

父元素.appendchild(子元素) 在父元素的末尾添加一个元素节点；

父元素.append(子元素。子元素。。。。) 在父元素中添加多个子元素节点

父元素.insertBefore(待插入的元素,在那个元素之前) 在元素之前之前插入元素

父元素.replacechild(替换的元素，被替换的元素)；

创建元素

document.createElement('标签名')； 

document.creatTextNode(‘文本标签’);

document.createcomment(‘注释标签’);

document.createDocumentFragement()  没有参数  添加一个文档片段

删除元素

父元素.removechild('子元素')；删除父元素中的子元素节点

父元素.remove()  没有参数 删除自己本省；

dom样式：

className:获取或者设置元素类名

classList;  一个对象

其中的方法有 

add('类名') ;添加一个类名

remove(‘类名’) 删除一个类名

contains('类名') 用来判断dom对象中是否包含某一个类名 如果存在则放回true  没有着放回false

toggle('类名'，true) 添加/删除一个类名   默认为true   删除false

获取元素的style属性；

dom对象.style; 获取的是行内样式   可以修改

window.getComputedStyle(对象).样式名，（注意：只能读取不能修改）

事件添加

对象.οnclick=function(){}   声明一个匿名函数

事件委托

e.target