文档对象模型
Dom是关于创建,修改,插入,删除页面元素的标准
Dom赋予我们操作操作页面的能力
页面的内容都是字符串,js会把这些字符串转换成DOM树,DOM树会把字符串转换成节点,其实我们操作DOM的根本就是操作节点
var box = document.getElementById("box");var attr = box.attributes;//元素属性节点的集合console.log(attr);console.log(attr[0]);//id=boxvar child = box.childNodes;//元素子节点的集合console.log(child);//元素节点,(常用)console.log(box.nodeName); //divconsole.log(box.nodeType); //1//属性节点console.log(attr[0].nodeName);//idconsole.log(attr[0].nodeType); //2//文本节点console.log(child[0].nodeName);//#textconsole.log(child[0].nodeType);//3//注释节点console.log(child[3].nodeName);//#commentconsole.log(child[3].nodeType);//8//文档节点console.log(document.nodeName);//#documentconsole, log(document.nodeType);//9
arrtibutes
属性节点,返回元素身上的所有属性节点,每个属性都会有一个自己对应的下标
其中length属性代表元素身上有多少个属性节点
childNodes
元素身上的第一层子节点,返回元素身上的所有子节点的集合(第一层)
nodeName
节点的名称
任何一个节点都会有这个属性
nodeType
节点的类型,返回的是一个数字
nodeName节点名称,任何一个节点都有节点名称
tagName 标签名称,只有元素节点才有这个属性
- 隐藏1
- 隐藏2
- 隐藏3
- 隐藏4
- 隐藏5
使用元素父节点完成【点击子元素隐藏父节点】
- 隐藏1
- 隐藏2
- 隐藏3
- 隐藏4
- 隐藏5
children(非标准)
父级.children
获取到父级下的第一层子元素,它是一个集合,代表所有的子元素,每个子元素都有一个对应下标
它还有一个length属性,代表子元素的个数
childrenNodes
获取元素的第一层的所有子节点,包括文本注释
- 隐藏1
- 隐藏2
- 隐藏3
- 隐藏4
- 隐藏5
- 隐藏1
- 隐藏2
- 隐藏3
- 隐藏4
- 隐藏5
找第一个兄弟节点的代码运行效果
语法:
元素.offsetLeft