web中的DOM指什么

Posted 2021-02-13 myiuni

DOM document object model

DOM 就是描述html节点关系的图谱

DOM提供获取元素的方法和之间关系属性以及操作元素的方法

1、获取元素方法

1.1 通过ID名来获取元素

var oTab = document.getElementById(‘tab‘);
通过id获取时上下文只能是document

若文档中出现同名ID，则通过该方法获得的是第一个元素

若没获取到元素，则返回null

在IE6/7中会把表单元素的name属性值当做id来用，并且不区分id的大小写；所以不要让表单元素的name和id重复，不要用id的大小写区分元素

可以直接用ID名来代替获取元素对象(但是不推荐)，例：console.log(tab)也可获取到元素

1.2 通过标签名来获取元素

var oP = document.getElementsByTagName(‘p‘);
在整个文档中通过标签名获取的是一组元素

document在这里为上下文(context),可通过改变上下文来限制获取范围

获取这组元素长度：Obj.length或Obj[“length”]

获取第一个元素：Obj[0]或Obj.item(0)

1.3 通过元素name属性值获取元素

var names = document.getElementsByName(‘name‘);
在整个文档中通过标签名获取的是一组元素
在IE浏览器下只对表单元素属性有效
1.4 通过元素class属性值获取元素

var list = document.getElementsByClassName(‘list‘);
在整个文档中通过标签名获取的是一组元素
这个方法是项目中最常用的方法
不兼容IE6/7/8
1.5 通过查询class属性值获取元素

document.querySelector(‘.tab‘);
document.querySelectorAll(‘.tab‘);
此方法不兼容IE6/7/8
document.querySelector();获取的是第一个类名元素
document.querySelectorAll();获取的是多个元素，是一个类数组集合
1.6 获取html,body元素

html:document.documentElement
body:document.body
获取当前屏幕宽度的兼容方法：

var width = document.documentElement.clientWidth || document.body.clientWidth;
2、 增加DOM的方法

动态创建一个div元素对象

var div = document.createElement("div");
将创建元素添加到页面去,默认添加到容器的末尾位置

document.body.appendChild(div);
也可以添加到指定元素之前，第一个参数为添加元素，第二个参数为指定元素

document.body.insertBefore(oP,oDiv);
等同于

oDiv.parentNode.insertBefore(oP,oDiv);
3 、删除DOM的方法

只有父级元素才有权利删除，所以必须找到父元素才能删除

oDiv.parentNode.removeChild(oDiv);
4 、克隆DOM的方法

cloneNode() 默认为false，只克隆当前的;设置为true可以把选定元素的子孙元素也克隆出来

var a = oP.cloneNode();
cloneNode(true);
5 、替换DOM的方法

replaceChild(newNode,oldNode)将newNode元素替换oldNode元素

oDiv.parentNode.replaceChild(dd,oP);
6 、增加自定义属性

给DOM增加自定义属性的方式

obj["key"]=value;
obj.key=value;
获取形式只能是obj.key，另一种方式是

obj.setAttribute(key,value);
获取形式只能是obj.getAttribute(key)

删除形式只能是obj.removeAttribute(key)

二者区别在于前者的添加属性不会显示在结构上；后者添加的属性会改变html结构,显示在结构上

而后者的缺陷在于IE6/7/8下不能修改class属性

7、 节点类型

类型 nodeType nodeName nodeValue
元素节点(元素标签) 1 大写的标签名 null
文本节点(文字) 3 text 文字内容
注释节点(注释) 8 comment 注释内容
document 9 document null
在标准浏览器下，把空格和回车的内容都作为text文本节点处理

练习题：模拟children方法，实现获取指定元素下的元素子节点

8、 DOM获取关系属性

Node节点:一个页面中的标签、文字、注释……都是节点

Obj.childNodes 获取所有子节点 (包括文本节点、注释节点、元素节点。。。)

Obj.children 获取所有元素子节点 (只包含元素节点)

Obj.parentNode 获取父节点

Obj.previousSibling 获取上一个哥哥节点(排行第五，则获取的是第四个)

Obj.nextSibling 获取下一个弟弟节点(排行第五，则获取的是第六个)

Obj.firstChild 获取所有子节点中第一个

Obj.lastChild 获取所有子节点中最后一个