DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
创新互联专注于申扎企业网站建设,响应式网站建设,商城网站定制开发。申扎网站建设公司,为申扎等地区提供建站服务。全流程定制网站建设,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
HTML DOM 模型被构造为对象的树。
打开网页后,首先看到的是浏览器窗口,即顶层的window对象。
其次,看到的是网页文档的内容,即document文档。
首先看一下w3c提供的document对象的定义和其他相关知识:
现在我们来详细的看一下document对象:
document.getElementById("d1");
根据id找元素,因为id是唯一的,只能找的一个元素
getElementsByClassName("c1");
根据class找元素,因为class不唯一,可以找到多个元素,返回数组
document.getElementsByTagName("div");
根据标签名找元素,因为标签名不唯一,可以找到多个元素,返回数组
document.getElementsByName("uname");
根据name找元素,主要用于表单元素,因为有单选等情况name不唯一,可以找到多个元素,返回数组
1 2 3 4 5无标题文档 6 7 89 10 1112 13 14 15 16 17
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找元素,其他方法找元素都可以找到多个,返回数组
1 2 3 4 5无标题文档 6 7 89 10 1112 13 14 15 16 17
如上我们可以看出,找子元素会找到多个,返回的一定是数组,id为d1的元素内有5个子元素三个文本,一个div元素,一个span元素
注意:这个方法不仅找出了标签内的标签,还会找出文本,这里回车换行也被识别成文本写入了数组
1 2 3 4 5无标题文档 6 7 89 10 1112 13 14 15 16 17
父级元素只能有一个,如上是id=d1的元素的父级元素body元素
1 2 3 4 5无标题文档 6 78 9 1011 12 13 14 15
在如上代码中,我们先让id=d1的元素紧贴跟前后不留回车等文本内容,得出上一个同级元素没有,下一个同级元素为div
1 2 3 4 5无标题文档 6 7 89 10 11121314 15 16
通过审查元素,我们可以看到id=d1的元素已被移除,id=d2的元素被追加了子元素
1 2 3 4 5无标题文档 6 7 89 这是div中的span中的内容101112 这是div2中的span中的内容131415 这是div3中的span中的内容1617 18 19
以上我们可以看出innerText只会获取内容文本,而innerHTML会将内容代码一起获取
这两个方法不仅可获取内容,还可以赋值写入内容,赋值写入的内容会替换原来的内容,并且通过innerHTML赋值写入的内容会和正常代码一样在网页中生效
1 2 3 4 5无标题文档 6 7 8 9 10 11
如上我们可以通过调用value来给表单元素赋值和取值。
1 2 3 4 5无标题文档 6 7 89 这是div中的span中的内容101112 这是div2中的span中的内容1314 15 16
如上我们可以看出我们添加的bs属性,和第二个div中被移除的bs属性,以及获取的bs属性。
1 2 3 4 5无标题文档 6 7 89 这是div1中的内容101112 这是div2中的内容1314 15 16