DOM对象之document对象

DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

创新互联专注于申扎企业网站建设,响应式网站建设,商城网站定制开发。申扎网站建设公司,为申扎等地区提供建站服务。全流程定制网站建设，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

HTML DOM 模型被构造为对象的树。

打开网页后，首先看到的是浏览器窗口，即顶层的window对象。

其次，看到的是网页文档的内容，即document文档。

DOM对象之document对象

首先看一下w3c提供的document对象的定义和其他相关知识：

DOM对象之document对象

现在我们来详细的看一下document对象：

第一类：找元素

四种基本的找元素的方法

document.getElementById("d1");

根据id找元素，因为id是唯一的，只能找的一个元素

getElementsByClassName("c1");

根据class找元素，因为class不唯一，可以找到多个元素，返回数组

document.getElementsByTagName("div");

根据标签名找元素，因为标签名不唯一，可以找到多个元素，返回数组

document.getElementsByName("uname");

根据name找元素，主要用于表单元素，因为有单选等情况name不唯一，可以找到多个元素，返回数组

DOM对象之document对象

 1  2  3  4  5 无标题文档 6  7  8      9         
10         11

13 14 15 16 17

DOM对象之document对象

id=d1的返回值a，找到div元素

class=c1的返回值数组b，b[1]，数组b中的第二个元素，找到span元素

标签=div的返回值数组c，c[0]，数组c第一个元素，找到div元素

name=uname的返回值数组d，d[0]，数组d的第一个元素，找到input元素

如上我们可以看出除了根据id找元素，其他方法找元素都可以找到多个，返回数组

复杂的找元素

a.childNodes[0]方法找该元素的子元素

DOM对象之document对象

 1  2  3  4  5 无标题文档 6  7  8      9         
10         11

1 2 3 4 5 无标题文档 6 7 8 9

10 11 12 13 14 15 16 17

1 2 3 4 5 无标题文档 6 7 8

9 10 11 12 13 14 15

1 2 3 4 5 无标题文档 6 7 8 9

10 11 12 13 14 15 16

1 2 3 4 5 无标题文档 6 7 8 9 这是div中的span中的内容10 11 12 这是div2中的span中的内容13 14 15 这是div3中的span中的内容16 17 18 19

1 2 3 4 5 无标题文档 6 7 8 9 10 11

1 2 3 4 5 无标题文档 6 7 8 9 这是div中的span中的内容10 11 12 这是div2中的span中的内容13 14 15 16

1 2 3 4 5 无标题文档 6 7 8 9 这是div1中的内容10 11 12 这是div2中的内容13 14 15 16

DOM对象之document对象

第一类：找元素

四种基本的找元素的方法

复杂的找元素

a.childNodes[0]方法找该元素的子元素

a.parentNode 找父级元素

找同级元素

a.previousSibling 找上一个同级元素

a.nextSibling 找下一个同级元素

第二类：控制元素

remove删除元素

createElement创建元素

appendChild追加元素

第三类：操作内容

普通元素的操作

innerText获取内容文本

innerHTML获取内容代码

表单元素的操作

第四类：操作属性

setAttribute(属性名,属性值)设置属性

removeAttribute(属性名)移除属性

getAttribute(属性名)获取属性

第五类：操作样式

其他资讯