Web前端开发之HTML元素,web前端开发中的DOM到底是什么

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 获取所有子节点中最后一个