python【第十六篇】DOM

　　文档对象模型（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>