189 8069 5689

DOM对象之document对象

DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

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

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

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

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

DOM对象之document对象

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

DOM对象之document对象

DOM对象之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     
12     
13     14     15 16 17 

DOM对象之document对象

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     
12     13     14     15 16 17 

DOM对象之document对象

DOM对象之document对象

如上我们可以看出,找子元素会找到多个,返回的一定是数组,id为d1的元素内有5个子元素三个文本,一个div元素,一个span元素

注意:这个方法不仅找出了标签内的标签,还会找出文本,这里回车换行也被识别成文本写入了数组

a.parentNode 找父级元素

DOM对象之document对象

 1  2  3  4  5 无标题文档 6  7  8      9         
10         11     12     13     14     15 16 17 

DOM对象之document对象

DOM对象之document对象

父级元素只能有一个,如上是id=d1的元素的父级元素body元素

找同级元素
a.previousSibling 找上一个同级元素
a.nextSibling 找下一个同级元素

DOM对象之document对象

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

DOM对象之document对象

DOM对象之document对象

在如上代码中,我们先让id=d1的元素紧贴跟前后不留回车等文本内容,得出上一个同级元素没有,下一个同级元素为div

第二类:控制元素

remove删除元素
createElement创建元素
appendChild追加元素

DOM对象之document对象

 1  2  3  4  5 无标题文档 6  7  8      9         
10         11     12     13     14 15 16 

DOM对象之document对象

DOM对象之document对象

通过审查元素,我们可以看到id=d1的元素已被移除,id=d2的元素被追加了子元素

第三类:操作内容

普通元素的操作

innerText获取内容文本
innerHTML获取内容代码

DOM对象之document对象

 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 

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

以上我们可以看出innerText只会获取内容文本,而innerHTML会将内容代码一起获取

这两个方法不仅可获取内容,还可以赋值写入内容,赋值写入的内容会替换原来的内容,并且通过innerHTML赋值写入的内容会和正常代码一样在网页中生效

表单元素的操作

DOM对象之document对象

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

DOM对象之document对象

DOM对象之document对象

如上我们可以通过调用value来给表单元素赋值和取值。

第四类:操作属性

setAttribute(属性名,属性值)设置属性
removeAttribute(属性名)移除属性
getAttribute(属性名)获取属性

DOM对象之document对象

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

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

如上我们可以看出我们添加的bs属性,和第二个div中被移除的bs属性,以及获取的bs属性。

第五类:操作样式

DOM对象之document对象

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

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象


分享文章:DOM对象之document对象
文章URL:http://cdxtjz.cn/article/jhcgjj.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。