DOM对象之document对象

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不唯一，可以找到多个元素，返回数组

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <div></div>

         <span></span>

     </div>

     <div class="c1"></div>

     <span class="c1"></span>

     <input type="button" name="uname" />

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     var b = document.getElementsByClassName("c1");    //根据class找元素

     var c = document.getElementsByTagName("div");    //根据标签名找元素

     var d = document.getElementsByName("uname");    //根据name找元素

     alert(a+"\n"+b[1]+"\n"+c[0]+"\n"+d[0]);

 </script>

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]方法找该元素的子元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <div></div>

         <span></span>

     </div>

     <div class="c1"></div>

     <span class="c1"></span>

     <input type="button" name="uname" />

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     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");

 </script>

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

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

a.parentNode 找父级元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <div></div>

         <span></span>

     </div>

     <div class="c1"></div>

     <span class="c1"></span>

     <input type="button" name="uname" />

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     alert(a.parentNode);

 </script>

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

找同级元素

a.previousSibling 找上一个同级元素

a.nextSibling 找下一个同级元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body><div id="d1">

         <div></div>

         <span></span>

     </div><div class="c1"></div>

     <span class="c1"></span>

     <input type="button" name="uname" />

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     alert(a.previousSibling+"\n"+a.nextSibling);

 </script>

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

第二类：控制元素

remove删除元素

createElement创建元素

appendChild追加元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <div></div>

         <span></span>

     </div>

     <div id="d2">

     </div>

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     var b = document.getElementById("d2");

     a.remove();    //移除元素

     var s = document.createElement("p");    //创建元素

     b.appendChild(s);     //追加元素

 </script>

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

第三类：操作内容

普通元素的操作

innerText获取内容文本

innerHTML获取内容代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <span>这是div中的span中的内容</span>

     </div>

     <div id="d2">

         <span>这是div2中的span中的内容</span>

     </div>

     <div id="d3">

         <span>这是div3中的span中的内容</span>

     </div>

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");    //根据id找元素

     var b = document.getElementById("d2");

     var c = document.getElementById("d3");

     alert(a.innerText+"\n"+a.innerHTML);

     b.innerText="hello";    //给元素赋值，针对文本，其他内容会被替换

     c.innerHTML="<b>加粗</b>"

 </script>

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

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

表单元素的操作

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <input type="text" name="uname" id="d5"/>

 </body>

 </html>

 <script>

     var a = document.getElementById("d5");

     a.value="hello";    //给元素赋值

     alert(a.value);        //元素的取值

 </script>

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

第四类：操作属性

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

removeAttribute(属性名)移除属性

getAttribute(属性名)获取属性

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1">

         <span>这是div中的span中的内容</span>

     </div>

     <div id="d2">

         <span>这是div2中的span中的内容</span>

     </div>

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");

     var b = document.getElementById("d2");

     a.setAttribute("bs",100);    //添加属性bs=100

     b.setAttribute("bs",100);    //添加属性bs=100

     alert(a.getAttribute("bs"));    //获取属性bs的值

     b.removeAttribute("bs");    //删除b的属性bs

 </script>

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

第五类：操作样式

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div id="d1" style="height:100px;broder:1px">

         这是div1中的内容

     </div>

       <div id="d2" style="height:100px">

         这是div2中的内容

     </div>

 </body>

 </html>

 <script>

     var a = document.getElementById("d1");

     var b = document.getElementById("d2");

     a.style.backgroundColor="red";    //设置样式,加的是内联的

     b.style.backgroundColor="red";    //设置样式,加的是内联的

     alert(a.style.height);    //获取样式

     b.style.backgroundColor="";    //移除样式

 </script>

如上我们可以添加样式，也可以获取样式的值，还可以用样式的值为空的方式来移除样式。

JavaScript对象之document对象的更多相关文章

  1. JavaScript中的global对象，window对象以及document对象的区别和联系

    JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...

  2. 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  3. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. Unit06： 外部对象概述 、 window 对象 、 document 对象

    Unit06: 外部对象概述 . window 对象 . document 对象 小代码演示: <!DOCTYPE html> <html> <head> < ...

  5. 【温故而知新-Javascript】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

  6. JavaScript基础知识----document对象

    对象属性document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设 ...

  7. window对象；document对象；

    window对象: DOM:文档对象模型 --树模型文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 一:window: 属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前 ...

  8. 9.22 window对象、document对象

    一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...

  9. 详解HTML中的window对象和document对象

    Window -- 代表浏览器中一个打开的窗口: 对象属性 window //窗口自身 window.self //引用本窗户window=window.self window.name //为窗口命 ...

随机推荐

  1. unity 本地帮助文档 慢

    unity ,打开本地帮助文档时,有时会加载很慢,主要原因是网页里嵌入了访问google的代码.解决办法:打开本地hosts文件,里面加入"127.0.0.1 fonts.googleapi ...

  2. 一起来学jquery!

    jquery学习之旅!(未完待续) ------------(一)jquery书写步骤 ------------(二)jquery事件与函数 ------------(三)jquery修改css属性 ...

  3. Openstack Swift 原理、架构与 API 介绍

    OpenStack Swift 开源项目提供了弹性可伸缩.高可用的分布式对象存储服务,适合存储大规模非结构化数据.本文将深入介绍 Swift 的基本设计原理.对称式的系统架构和 RESTful API ...

  4. C#基础知识-函数的定义和调用（五）

    函数也可以称为方法,可以很方便的把一些行为封装到函数里面,当调用这一函数时会把函数块里面的代码按照顺序执行,方法可以有多种形式,有无参数,有无返回值等. 1. 函数的定义   函数定义的基本格式: s ...

  5. 解决mysql 服务无法启动问题：Can't find messagefile 'D:\ ools\mysql-5.6.25-winx64\share\errmsg.sys'

    右击我的电脑-->管理,查看Window日志里的应用程序,发现报错. 仔细检查一下my.ini的配置,确保路径正确,楼主的目录如下: 关键的一步,查看my.default文件,加入这样一句:sq ...

  6. Tomcat--各个目录详解（二）

    Tomcat整体目录: 一.bin文件(存放启动和关闭tomcat脚本) 其中.bat和.sh文件很多都是成对出现的,作用是一样的,一个是Windows的,一个是Linux. ① startup文件: ...

  7. Struts流程分析+源码分析

    1.初始化工作 读取配置---转换器-----读取插件 当struts-config.xml配置文件加载到内存,则会创建两个map:ActionConfigs,FromBeans.这两个map都交由M ...

  8. Python: import vs from （module) import function(class) 的理解

    Python: Import vs From (module) import function(class) 本文涉及的 Python 基本概念: Module Class import from . ...

  9. mac上解决Resource temporarily unavailable

    Resource temporarily unavailable这种问题一般是因为当前的进程数或者文件数不够 fork: Resource temporarily unavailable 修改最大进程 ...

  10. UILabel图文混排显示图片和文字

    //传入文字 自动图片放在左边文字紧接着后排排布 -(void)setAttrDetailLabelWithTitle:(NSString *)title { NSMutableAttributedS ...