文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

  DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.

  DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。

  通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

1 查找元素

1.1 直接查找
 document.getElementById             根据ID获取一个标签
 document.getElementsByName          根据name属性获取标签集合
 document.getElementsByClassName     根据class属性获取标签集合
 document.getElementsByTagName       根据标签名获取标签集合

1.2 间接查找

 parentNode          // 父节点
 childNodes          // 所有子节点
 firstChild          // 第一个子节点
 lastChild           // 最后一个子节点
 nextSibling         // 下一个兄弟节点
 previousSibling     // 上一个兄弟节点

 parentElement           // 父节点标签元素
 children                // 所有子标签
 firstElementChild       // 第一个子标签元素
 lastElementChild        // 最后一个子标签元素
 nextElementtSibling     // 下一个兄弟标签元素
 previousElementSibling  // 上一个兄弟标签元素

2 操作

2.1 内容

 innerHTML  设置或获取位于对象起始和结束标签内的 HTML
 outerHTML  设置或获取对象及其内容的 HTML 形式
 innerText  设置或获取位于对象起始和结束标签内的文本
 outerText  设置(包括标签)或获取(不包括标签)对象的文本
 value      值

看个例子,HTML和CSS代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #i1{
             color: #46FF1D;
             background-color: #c70048;
         }
     </style>
 </head>
 <body>
     <div id="i1">
         <div>哈哈</div>
         <div id="i2">。。呵呵
             <input type="text"/>
         </div>
     </div>
 </body>
 </html>

浏览器console中:

var tag=document.getElementById("i1");
undefined
tag.innerHTML
"
        <div>哈哈</div>
        <div id="i2">。。呵呵
            <input type="text">
        </div>
    "
-----------------------------------
tag.outerHTML

"<div id="i1">
        <div>哈哈</div>
        <div id="i2">。。呵呵
            <input type="text">
        </div>
    </div>"
------------------------------------
tag.innerText "哈哈 。。呵呵 "
-----------------------------------
tag.outerText
"哈哈
。。呵呵  "

2.2 属性

 attributes                // 获取所有标签属性
 setAttribute(key,value)   // 设置标签属性
 getAttribute(key)         // 获取指定标签属性

 /*
 var atr = document.createAttribute("class");
 atr.nodeValue="democlass";
 document.getElementById('n1').setAttributeNode(atr);
 */

2.3 class操作

 className                // 获取所有类名
 classList.remove(cls)    // 删除指定类
 classList.add(cls)       // 添加类

2.4 标签操作

2.4.1 创建标签

 // 方式一
 var tag = document.createElement('a')
 tag.innerText = "zingp"
 tag.className = "c1"
 tag.href = "http://www.cnblogs.com/zingp"

 // 方式二
 var tag = "<a class='c1' href='http://www.cnblogs.com/zingp'>zingp</a>"

2.4.2 操作标签

 // 方式一
 var obj = "<input type='text' />";
 xxx.insertAdjacentHTML("beforeEnd",obj);
 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

 //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

 // 方式二
 var tag = document.createElement('a')
 xxx.appendChild(tag)
 xxx.insertBefore(tag,xxx[1])

2.5 样式操作

 var obj = document.getElementById('i1')

 obj.style.fontSize = "32px";
 obj.style.backgroundColor = "red";

2.6 位置操作

 总文档高度
 document.documentElement.offsetHeight

 当前文档占屏幕高度
 document.documentElement.clientHeight

 自身高度
 tag.offsetHeight

 距离上级定位高度
 tag.offsetTop

 父定位标签
 tag.offsetParent

 滚动高度
 tag.scrollTop

 /*
     clientHeight -> 可见区域:height + padding
     clientTop    -> border高度
     offsetHeight -> 可见区域:height + padding + border
     offsetTop    -> 上级定位标签的高度
     scrollHeight -> 全文高:height + padding
     scrollTop    -> 滚动高度
     特别的:
         document.documentElement代指文档根节点
 */

2.7 提交表单

document.geElementById('form').submit()

2.8 其他操作

 console.log                 输出框
 alert                       弹出框
 confirm                     确认框

 // URL和刷新
 location.href               获取URL
 location.href = "url"       重定向
 location.reload()           重新加载

 // 定时器
 setInterval                 多次定时器
 clearInterval               清除多次定时器
 setTimeout                  单次定时器
 clearTimeout                清除单次定时器

3 事件

对于事件需要注意的要点:

  • this

this标签当前正在操作的标签。

示例1:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .i1{
             background-color: #c70048;
             width: 500px;
             height: 300px;
             margin: auto;

         }
     </style>
 </head>
 <body>
     <div class="i1 ">
         我爱北京天安门
     </div>
     <script>
         var tag = document.getElementsByClassName("i1");
         console.log(tag);
         tag[0].onmouseover = function () {
              tag[0].style.backgroundColor = "#94C728";
         };
         tag[0].onmouseout = function () {
              tag[0].style.backgroundColor = "red";
         };
     </script>
 </body>
 </html>

示例2:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <table border="1" width="300px">
         <tr><td>1</td><td>2</td><td>3</td></tr>
         <tr><td>1</td><td>2</td><td>3</td></tr>
         <tr><td>1</td><td>2</td><td>3</td></tr>
     </table>
     <script>
         var myTrs = document.getElementsByTagName("tr");
         for(var i=0;i<myTrs.length;i++){
             myTrs[i].onmouseover = function () {
                 this.style.backgroundColor = "red";
             };
             myTrs[i].onmouseout = function () {
                 this.style.backgroundColor = "";
             };
         }
     </script>
 </body>
 </html>
 

python【第十六篇】DOM的更多相关文章

  1. Python之路【第十六篇】:Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  2. Python进阶(十六)----面向对象之~封装,多态,鸭子模型,super原理(单继承原理,多继承原理)

    Python进阶(十六)----面向对象之~封装,多态,鸭子模型,super原理(单继承原理,多继承原理) 一丶封装 , 多态 封装:            将一些东西封装到一个地方,你还可以取出来( ...

  3. Python 爬虫十六式 - 第七式:正则的艺术

    RE:用匹配来演绎编程的艺术 学习一时爽,一直学习一直爽   Hello,大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了 pyquery 今天我们将迎来我们数据匹配部分的最后一位 ...

  4. Python爬虫十六式 - 第四式: 使用Xpath提取网页内容

    Xpath:简单易用的网页内容提取工具 学习一时爽,一直学习一直爽 !   Hello,大家好,我是Connor,一个从无到有的技术小白.上一次我们说到了 requests 的使用方法.到上节课为止, ...

  5. Python爬虫十六式 - 第三式:Requests的用法

    Requests: 让 HTTP 服务人类 学习一时爽,一直学习一直爽   Hello,大家好,我是Connor,一个从无到有的技术小白.今天我们继续来说我们的 Python 爬虫,上一次我们说到了 ...

  6. Python 爬虫十六式 - 第二式:urllib 与 urllib3

    Python请求标准库 urllib 与 urllib3 学习一时爽,一直学习一直爽!   大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了什么是HTTP协议,那么这一次我们就要动 ...

  7. 解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译)

    解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译) http://improve.dk/orcamdf-rawdatabase-a-swiss-a ...

  8. 跟我学SpringCloud | 第十六篇:微服务利剑之APM平台(二)Pinpoint

    目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...

  9. Egret入门学习日记 --- 第十六篇(书中 6.10~7.3节 内容)

    第十六篇(书中 6.10~7.3节 内容) 昨天搞定了6.9节,今天就从6.10节开始. 其实这个蛮简单的. 这是程序员模式. 这是设计师模式. 至此,6.10节 完毕. 开始 6.11节. 有点没营 ...

  10. Python 爬虫十六式 - 第六式:JQuery的假兄弟-pyquery

    PyQuery:一个类似jquery的python库 学习一时爽,一直学习一直爽   Hello,大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了 BeautifulSoup 美味 ...

随机推荐

  1. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  2. java 反射(reflect)总结,附对象打印工具类

    java反射机制认知 java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类的信息以及动态调用对象的方法的 ...

  3. BA - 读书雷达10本必读书

    https://www.douban.com/doulist/43172796/ 用户故事与敏捷方法 入门篇之一: “是每个ThoughtWorks BA都读的经典入门书籍,详细介绍了用户故事及实用操 ...

  4. SQL SERVER 中如何将NULL转换为0

    select isnull(fieldname,0) from tablename 如果字段fieldname的值是null,则结果是0

  5. 如何在客户端配置ODBC来访问远程DB2 for Windows服务器

    如何在客户端配置ODBC来访问远程DB2 for Windows服务器                                  马根峰                    (广东联合电子服 ...

  6. win7家庭版升级旗舰版

    点“开始”——在“所有程序”点"Windows Anytime Update"——点“输入升级密钥”,然后就出现一个密钥框,输入一个旗舰版的密钥,确定就行了,10分钟左右就升级好了 ...

  7. Day05 - Python 常用模块

    1. 模块简介 模块就是一个保存了 Python 代码的文件.模块能定义函数,类和变量.模块里也能包含可执行的代码. 模块也是 Python 对象,具有随机的名字属性用来绑定或引用. 下例是个简单的模 ...

  8. Nginx性能统计模块http_stub_status_module使用

    1.进入nginx源码目录,重新配置编译参数 ./configure --prefix=/usr/local/nginx/ --with-http_stub_status_module 2.重新编译安 ...

  9. LAMP网站架构方案分析

    本文引自:http://www.williamlong.info/archives/1908.html LAMP(Linux-Apache-MySQL-PHP)网站架构是目前国际流行的Web框架,该框 ...

  10. U3D 收藏一个飞机随机运动的方法

    文章转载:http://www.manew.com/thread-43578-1-1.html 前面的学习中已经涉及到了随机运动,这一篇主要还是前面的随机运动的改进,不废话直接上效果图吧,对比前面的随 ...