JS16
DOM 文档对象模型
Document Object Model
文档对象模型是w3c组织推荐的处理可扩展标志的标准编程接口
分类
1. HTMLDom 针对HTML文档的标准模型
2. XMLDOM 针对XML文档的标准模型
语句要求更加严密 （数据传输 跨平台） Xhtml->html5
节点
文档中的每一部分都是节点包括document元素 属性 文本 注释 等等
核心Dom 针对任何结构化文档的标准模型
documentNode ElementNode, TextNode AttributeNode
1、元素节点 Node.ELEMENT_NODE(1)
2、属性节点 Node.ATTRIBUTE_NODE(2)
3、文本节点 Node.TEXT_NODE(3)
4、CDATA节点 Node.CDATASECTIONNODE(4)
5、实体引用名称节点 Node.ENTRYREFERENCENODE(5)
6、实体名称节点 Node.ENTITY_NODE(6)
7、处理指令节点 Node.PROCESSINGINSTRUCTIONNODE(7)
8、注释节点 Node.COMMENT_NODE(8)
9、文档节点 Node.DOCUMENT_NODE(9)
10、文档类型节点 Node.DOCUMENTTYPENODE(10)
11、文档片段节点 Node.DOCUMENTFRAGMENTNODE(11)
12、DTD声明节点 Node.NOTATION_NODE(12)
HTMLDOM节点
1、document HTMLdocument文档
2、element 元素
3、attr 属性
4、CharacterData -- text 文本
-- comment 注释
节点属性
1、nodeName 节点名字
2、nodeValue 节点值
3、nodeType 节点类型
获取文档元素方法
1、通过ID选取元素 document.getElementById();
id属性可自动生成被脚本访问的全局变量 不推荐使用 --可读性 保留字
2、通过名字选取元素document.getElementsByName
IE9以上和标准浏览器认为所有元素都有name
IE9 以下认为只有个别元素有name 表单 img form
document.elementname -->(form img iframe); --兼容
3、通过标签名选择器
document.getElementsByTagName();
element.getElementsByTagName();
4、通过css类选择器元素
document.getElementsByClassName() --IE9以下不兼容
5、通过css选择器选择元素
document.querySelector() 获取元素
element.querySelector()
document.querySelectorAll() 获取集合
element.querySelectorAll()
6、document.all 获取所有元素的集合
文档结构
节点的关系
--父节点
--子节点
--兄弟节点
--祖先节点
--后代节点
节点树
childNodes 所有的子节点 length
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
parentNode 父节点 --只有element可以作为父节点(除了document顶级节点)
var html = document.documentElement;
元素树
children 所有子元素集合
firstElementChild 第一个子元素 IE9+
lastElementChild 最后一个子元素 IE9+
previousElementSibling 上一个兄弟元素 IE9+
nextElementSibling 下一个兄弟元素 IE9+
parentElement 父元素 --只有element可以作为父元素
childElementCount 子元素的数量 IE9+
ownerDocument 返回元素所属的文档对象
实例： 通过table中最后一td中的按钮获取第一个中的数值
属性
1、标准属性
DOM元素映射HTML的属性(属性伴随元素存在)
2、非标准属性 (自定义属性)
getAttribute(attr) --获取自定义或内置属性的值(属性需要存在)
setAttribute(attr,value) --设置自定义或内置属性
hasAttribute() --判断属性是否存在(自定义或内置)
removeAttribute() --删除自定义或内置属性
3、属性节点
getAttributeNode(attr) --获取属性节点
setAttributeNode(s) --设置属性节点
创建属性
var s = document.createAttribute(attrname);
设置节点值：s.nodeValue=’attrvalue’;
设置属性节点 box.setAttributeNode(s);
实例： 图片的延迟加载
HMLT5 data-*属性的使用
使用 data-* 属性来嵌入自定义数据--IE10以上
console.log(this.dataset);
