DOM对象之document对象

发布时间:2020-07-25 02:25:26 作者:zddnd
来源:网络 阅读:303

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <div></div>10         <span></span>11     </div>12     <div class="c1"></div>13     <span class="c1"></span>14     <input type="button" name="uname" />15 </body>16 </html>17 <script>18     var a = document.getElementById("d1");    //根据id找元素19     var b = document.getElementsByClassName("c1");    //根据class找元素20     var c = document.getElementsByTagName("div");    //根据标签名找元素21     var d = document.getElementsByName("uname");    //根据name找元素22     alert(a+"\n"+b[1]+"\n"+c[0]+"\n"+d[0]);23 </script>

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <div></div>10         <span></span>11     </div>12     <div class="c1"></div>13     <span class="c1"></span>14     <input type="button" name="uname" />15 </body>16 </html>17 <script>18     var a = document.getElementById("d1");    //根据id找元素19     alert(a.childNodes[0]+"\n"+a.childNodes[1]+"\n"+a.childNodes[2]+"\n"+a.childNodes[3]+"\n"+a.childNodes[4]+"\n"+a.childNodes[5]+"\n");20 </script>

DOM对象之document对象

DOM对象之document对象

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

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

a.parentNode 找父级元素

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <div></div>10         <span></span>11     </div>12     <div class="c1"></div>13     <span class="c1"></span>14     <input type="button" name="uname" />15 </body>16 </html>17 <script>18     var a = document.getElementById("d1");    //根据id找元素19     alert(a.parentNode);20 </script>

DOM对象之document对象

DOM对象之document对象

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

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

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body><div id="d1"> 8         <div></div> 9         <span></span>10     </div><div class="c1"></div>11     <span class="c1"></span>12     <input type="button" name="uname" />13 </body>14 </html>15 <script>16     var a = document.getElementById("d1");    //根据id找元素17     alert(a.previousSibling+"\n"+a.nextSibling);18 </script>

DOM对象之document对象

DOM对象之document对象

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

第二类:控制元素

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

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <div></div>10         <span></span>11     </div>12     <div id="d2">13     </div>14 </body>15 </html>16 <script>17     var a = document.getElementById("d1");    //根据id找元素18     var b = document.getElementById("d2");19     a.remove();    //移除元素 20     var s = document.createElement("p");    //创建元素21     b.appendChild(s);     //追加元素22 </script>

DOM对象之document对象

DOM对象之document对象

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

第三类:操作内容

普通元素的操作

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

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <span>这是div中的span中的内容</span>10     </div>11     <div id="d2">12         <span>这是div2中的span中的内容</span>13     </div>14     <div id="d3">15         <span>这是div3中的span中的内容</span>16     </div>17 </body>18 </html>19 <script>20     var a = document.getElementById("d1");    //根据id找元素21     var b = document.getElementById("d2");22     var c = document.getElementById("d3");23     alert(a.innerText+"\n"+a.innerHTML);24     b.innerText="hello";    //给元素赋值,针对文本,其他内容会被替换25     c.innerHTML="<b>加粗</b>"26 </script>

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

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

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

表单元素的操作

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <input type="text" name="uname" id="d5"/> 9 </body>10 </html>11 <script>12     var a = document.getElementById("d5");    
13     a.value="hello";    //给元素赋值14     alert(a.value);        //元素的取值15 </script>

DOM对象之document对象

DOM对象之document对象

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

第四类:操作属性

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

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1"> 9         <span>这是div中的span中的内容</span>10     </div>11     <div id="d2">12         <span>这是div2中的span中的内容</span>13     </div>14 </body>15 </html>16 <script>17     var a = document.getElementById("d1");18     var b = document.getElementById("d2");19     a.setAttribute("bs",100);    //添加属性bs=10020     b.setAttribute("bs",100);    //添加属性bs=10021     alert(a.getAttribute("bs"));    //获取属性bs的值22     b.removeAttribute("bs");    //删除b的属性bs23 </script>

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象

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

第五类:操作样式

DOM对象之document对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8     <div id="d1" > 9         这是div1中的内容10     </div>11       <div id="d2" >12         这是div2中的内容13     </div>14 </body>15 </html>16 <script>17     var a = document.getElementById("d1");18     var b = document.getElementById("d2");19     a.style.backgroundColor="red";    //设置样式,加的是内联的20     b.style.backgroundColor="red";    //设置样式,加的是内联的21     alert(a.style.height);    //获取样式22     b.style.backgroundColor="";    //移除样式23 </script>

DOM对象之document对象

DOM对象之document对象

DOM对象之document对象


推荐阅读:
  1. JQuery对象与DOM对象
  2. 前端05.js入门之BOM对象与DOM对象。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

浏览器 标签 document

上一篇:C++中const和#define的利弊探索

下一篇:MySQL 5.7.15 安装 (二进制版本)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》