DOM（文档对象模型(Document Object Model)）

　　文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作

1、查找元素

①  直接查找

  1. document.getElementById             根据ID获取一个标签
  2. document.getElementsByName          根据name属性获取标签集合
  3. document.getElementsByClassName     根据class属性获取标签集合
  4. document.getElementsByTagName       根据标签名获取标签集合

②  间接查找

  1. parentNode          // 父节点
  2. childNodes          // 所有子节点
  3. firstChild          // 第一个子节点
  4. lastChild           // 最后一个子节点
  5. nextSibling         // 下一个兄弟节点
  6. previousSibling     // 上一个兄弟节点
  7.  
  8. parentElement           // 父节点标签元素
  9. children                // 所有子标签
  10. firstElementChild       // 第一个子标签元素
  11. lastElementChild        // 最后一个子标签元素
  12. nextElementtSibling     // 下一个兄弟标签元素
  13. previousElementSibling  // 上一个兄弟标签元素

③  扩展练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id = "i1">我是i1</div>
  9.     <a>aaaaa</a>
  10.     <a>bbbbb</a>
  11.     <a>ccccc</a>
  12. </body>
  13. </html>

1、直接查找练习.html

  1. 　　　　　　//获取ID
  2. >document.getElementById('i1');
  3. < <div id=​"i1">​我是i1​</div>​
  4. 　　　　　　//获取内容
  5. >document.getElementById('i1').innerText
  6. <"我是i1"
  7. 　　　　　　//重新赋值
  8. >document.getElementById('i1').innerText = '新内容'
  9. <"新内容"
  10. 　　　　　　//获取tagname集合
  11. >document.getElementsByTagName('a');
  12. <[<a>​aaaaa​</a>​, <a>​bbbbb​</a>​, <a>​ccccc​</a>​]
  13. 　　　　　　//获取集合指定索引元素
  14. >document.getElementsByTagName('a')[1]
  15. < <a>​bbbbb​</a>​
  16. 　　　　　　//对单个元素重新赋值
  17. >document.getElementsByTagName('a')[1].innerText = 66666;
  18. <66666
  19. 　　　　　　//对集合中所有文件赋值
  20. >tags = document.getElementsByTagName('a');
  21. <[<a>​aaaaa​</a>​, <a>​66666​</a>​, <a>​ccccc​</a>​]
  22. >for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}
  23. <99999
  24. >tags
  25. <[<a>​99999​</a>​, <a>​99999​</a>​, <a>​99999​</a>​]
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <div>c1Sibling</div>
  10.         <div>c1</div>
  11.     </div>
  12.     <div>
  13.         <div>c2Sibling</div>
  14.         <div id="i1">c2</div>
  15.     </div>
  16.     <div>
  17.         <div>c3Sibling</div>
  18.         <div>c3</div>
  19.     </div>
  20. </body>
  21. </html>

2、间接查找练习.html

  1.     //获取ID
  2. >tag = document.getElementById('i1');
  3. < <div id=​"i1">​c2​</div>​
  4.     //获取ID的父项
  5. >tag.parentElement
  6. <   <div>​
  7.         <div>​c2Sibling​</div>​
  8.         <div id=​"i1">​c2​</div>​
  9.     </div>​
  10.     //获取父项的子节点
  11. >tag.parentElement.children
  12. < [<div>​c2Sibling​</div>​,<div id=​"i1">​c2​</div>​]
  13.     //获取父项的大兄弟
  14. >tag.parentElement.previousElementSibling
  15. >   <div>​
  16.     <div>​c1Sibling​</div>​
  17.     <div>​c1​</div>​
  18.     </div>​

　　

2、内容操作

①  内容

  1. innerText   文本
  2. outerText
  3. innerHTML   HTML内容
  4. innerHTML
  5. value       值

②  属性　　

  1. attributes                // 获取所有标签属性
  2. setAttribute(key,value)   // 设置标签属性
  3. getAttribute(key)         // 获取指定标签属性
  4.  
  5. /*
  6. var atr = document.createAttribute("class");
  7. atr.nodeValue="democlass";
  8. document.getElementById('n1').setAttributeNode(atr);
  9. */
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选"  onclick="CheckAll();"/>
  9.     <input type="button" value="取消" onclick="CancelAll();"/>
  10.     <input type="button" value="反选" onclick="ReverseCheck();"/>
  11.  
  12.     <table border="1" >
  13.         <thead>
  14.  
  15.         </thead>
  16.         <tbody id="tb">
  17.             <tr>
  18.                 <td><input type="checkbox" /></td>
  19.                 <td>111</td>
  20.                 <td>222</td>
  21.             </tr>
  22.             <tr>
  23.                 <td><input type="checkbox" /></td>
  24.                 <td>111</td>
  25.                 <td>222</td>
  26.             </tr>
  27.             <tr>
  28.                 <td><input type="checkbox" /></td>
  29.                 <td>111</td>
  30.                 <td>222</td>
  31.             </tr>
  32.             <tr>
  33.                 <td><input type="checkbox" /></td>
  34.                 <td>111</td>
  35.                 <td>222</td>
  36.             </tr>
  37.         </tbody>
  38.     </table>
  39.     <script>
  40.         function CheckAll(ths){
  41.             var tb = document.getElementById('tb');
  42.             var trs = tb.childNodes;
  43.             for(var i =0; i<trs.length; i++){
  44.  
  45.                 var current_tr = trs[i];
  46.                 if(current_tr.nodeType==1){
  47.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  48.                     inp.checked = true;
  49.                 }
  50.             }
  51.         }
  52.  
  53.         function CancelAll(ths){
  54.             var tb = document.getElementById('tb');
  55.             var trs = tb.childNodes;
  56.             for(var i =0; i<trs.length; i++){
  57.  
  58.                 var current_tr = trs[i];
  59.                 if(current_tr.nodeType==1){
  60.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  61.                     inp.checked = false;
  62.                 }
  63.             }
  64.         }
  65.  
  66.         function ReverseCheck(ths){
  67.             var tb = document.getElementById('tb');
  68.             var trs = tb.childNodes;
  69.             for(var i =0; i<trs.length; i++){
  70.                 var current_tr = trs[i];
  71.                 if(current_tr.nodeType==1){
  72.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  73.                     if(inp.checked){
  74.                         inp.checked = false;
  75.                     }else{
  76.                         inp.checked = true;
  77.                     }
  78.                 }
  79.             }
  80.         }
  81.  
  82.     </script>
  83. </body>
  84. </html>
  85.  
  86. Demo
  87.  
  88. Demo

Demo

3、Class操作

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

简单练习：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <div>c1Sibling</div>
  10.         <div>c1</div>
  11.     </div>
  12.     <div>
  13.         <div>c2Sibling</div>
  14.         <div id="i1">c2</div>
  15.     </div>
  16.     <div>
  17.         <div>c3Sibling</div>
  18.         <div>c3</div>
  19.     </div>
  20. </body>
  21. </html>

class简单操作.html

  1.         //获取ID
  2. >document.getElementById('i1');
  3. < <div id=​"i1">​c2​</div>​
  4.         //赋值变量
  5. >tag = document.getElementById('i1');
  6. < <div id=​"i1">​c2​</div>​
  7.         //设置class样式
  8. >tag.className = 'c1';
  9. > "c1"
  10.         //设置成功
  11. >tag
  12. < <div id=​"i1" class=​"c1">​c2​</div>​
  13.         //修改class样式
  14. >tag.className = 'c2';
  15. < "c2"
  16. >tag
  17. < <div id=​"i1" class=​"c2">​c2​</div>​
  18.         //获取样式列表
  19. >tag.classList
  20. < ["c2"]
  21.         //样式列表集合中添加样式
  22. >tag.classList.add('c3')
  23. < undefined
  24. >tag
  25. < <div id=​"i1" class=​"c2 c3">​c2​</div>​
  26.         //样式列表集合中删除样式
  27. >tag.classList.remove('c2');
  28. < undefined
  29. >tag
  30. < <div id=​"i1" class=​"c3">​c2​</div>​

做完上面例子发现不得了了，我们直接可以对样式进行添加修改了，而且现在就可以做动态模块框了，点击按钮可以触发一系列动态效果，吊炸天了呼~，开搞开搞！！！

做之前还得了解这个知识点：

  1. <div onclick="func();">点我</div>
  2. <script>
  3.      function func() {
  4.  
  5.       }
  6. </script>

上面表示当鼠标点击到div后，执行func()函数

做个模态对话框：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .c1 {
  8.             position: fixed;
  9.             background-color: #423A3A;
  10.             right: 0;
  11.             left: 0;
  12.             top:0;
  13.             bottom: 0;
  14.             opacity: 0.6;
  15.             z-index: 9;
  16.         }
  17.         .c2 {
  18.             position: fixed;
  19.             background-color: white;
  20.             height: 400px;
  21.             width: 500px;
  22.             top:50%;
  23.             left: 50%;
  24.             z-index: 10;
  25.             margin-top: -200px;
  26.             margin-left: -250px;
  27.         }
  28.         .hide {
  29.             display: none;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div>
  35.         <input type="button" value="打开" onclick="ShowModel();"/>
  36.     </div>
  37.  
  38.     <div id="i1" class="c1 hide"></div>
  39.  
  40.     <div id="i2" class="c2 hide">
  41.         <input type="button" value="取消" onclick="HideModel();"/>
  42.     </div>
  43.     <script>
  44.         function ShowModel() {
  45.             document.getElementById('i1').classList.remove('hide');
  46.             document.getElementById('i2').classList.remove('hide');
  47.         }
  48.         function HideModel() {
  49.             document.getElementById('i1').classList.add('hide');
  50.             document.getElementById('i2').classList.add('hide');
  51.         }
  52.     </script>
  53. </body>
  54.  
  55. </html>

模态对话框.html

页面效果：点击打开后，出现弹出，点击取消，弹出关掉

再做个选项框吧-全选、反选、取消：

  1. <body>
  2.     <div>
  3.         <table>
  4.             <thead>
  5.                 <tr>
  6.                     <td>选择</td>
  7.                     <td>IP地址</td>
  8.                 </tr>
  9.             </thead>
  10.             <tbody id="tb">
  11.                 <tr>
  12.                     <td><input type="checkbox"/></td>
  13.                     <td>192.168.2.201</td>
  14.                 </tr>
  15.                 <tr>
  16.                     <td><input type="checkbox"/></td>
  17.                     <td>192.168.2.202</td>
  18.                 </tr>
  19.                 <tr>
  20.                     <td><input type="checkbox"/></td>
  21.                     <td>192.168.2.203</td>
  22.                 </tr>
  23.             </tbody>
  24.         </table>
  25.         <input type="button" value="全选" onclick="ChooseAll();"/>
  26.         <input type="button" value="取消" onclick="CancleAll();"/>
  27.         <input type="button" value="反选" onclick="ReverseAll();"/>
  28.     </div>
  29.     <script>
  30.         function ChooseAll() {
  31.             var tbody = document.getElementById('tb');
  32.             var tr_list = tbody.children;
  33.             for(var i=0;i<tr_list.length;i++){
  34.                 var current_tr = tr_list[i];
  35.                 var checkbox = current_tr.children[0].children[0];
  36.                 checkbox.checked = true
  37.             }
  38.         }
  39.         function CancleAll() {
  40.             var tbody = document.getElementById('tb');
  41.             var tr_list = tbody.children;
  42.             for(var i=0;i<tr_list.length;i++){
  43.                 var current_tr = tr_list[i];
  44.                 var checkbox = current_tr.children[0].children[0];
  45.                 checkbox.checked = false
  46.             }
  47.         }
  48.          function ReverseAll() {
  49.             var tbody = document.getElementById('tb');
  50.             var tr_list = tbody.children;
  51.             for(var i=0;i<tr_list.length;i++){
  52.                 var current_tr = tr_list[i];
  53.                 var checkbox = current_tr.children[0].children[0];
  54.  
  55.                 if(checkbox.checked ){
  56.                     checkbox.checked=false
  57.                 }else {
  58.                      checkbox.checked=true
  59.                 }
  60.             }
  61.         }
  62.     </script>
  63. </body>

页面效果：点击全选所有选项框选上；点击取消后恢复；点击反选，只选择未选上的选项框；一个字叼叼叼！！

根本停不下来，后台管理左侧菜单-点击菜单显示选项，其他菜单关闭

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         .hide{
  6.             display: none;
  7.         }
  8.         .item .header{
  9.             height: 35px;
  10.             background-color: #2459a2;
  11.             color: white;
  12.             line-height: 35px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div style="width: 300px">
  18.         <div class="item">
  19.             <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单一</div>
  20.             <div class="content hide">
  21.                 <div>内容1</div>
  22.                 <div>内容1</div>
  23.                 <div>内容1</div>
  24.             </div>
  25.         </div>
  26.         <div class="item">
  27.             <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单二</div>
  28.             <div class="content hide">
  29.                 <div>内容2</div>
  30.                 <div>内容2</div>
  31.                 <div>内容2</div>
  32.             </div>
  33.         </div>
  34.         <div class="item">
  35.             <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单三</div>
  36.             <div class="content hide">
  37.                 <div>内容3</div>
  38.                 <div>内容3</div>
  39.                 <div>内容3</div>
  40.             </div>
  41.         </div>
  42.     </div>
  43.     <script>
  44.         function ChangeMenu(nid) {
  45.             var current_header = document.getElementById(nid)
  46.             var item_list = current_header.parentElement.parentElement.children
  47.             for(var i=0;i<item_list.length;i++){
  48.                 var current_item = item_list[i];
  49.                 current_item.children[1].classList.add('hide');
  50.             }
  51.             current_header.nextElementSibling.classList.remove('hide');
  52.         }
  53.     </script>
  54. </body>

页面效果：点击菜单一、菜单一展开，其他菜单关闭；点击其他菜单亦可

　

Python开发【前端】：HTML--》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】：CSS--》》http://www.cnblogs.com/lianzhilei/p/6046131.html

Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】：DOM的更多相关文章

  1. Python开发： DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  2. Python开发【前端】：jQuery

    jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...

  3. Python开发【前端】：JavaScript

    JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  4. Python开发【前端】：CSS

    css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...

  5. Python开发【前端】：HTML

    HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...

  6. Python开发【第一篇】：目录

    本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...

  7. web开发前端面试知识点目录整理

    web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...

  8. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  9. Python 开发轻量级爬虫07

    Python 开发轻量级爬虫 (imooc总结07--网页解析器BeautifulSoup) BeautifulSoup下载和安装 使用pip install 安装:在命令行cmd之后输入,pip i ...

随机推荐

  1. sqlserver 分离和附加

    1.何为数据库分离和附加 数据库分离: 分离数据库就是将某个数据库(如student_Mis)从SQL Server数据库列表中删除,使其不再被SQL Server管理和使用,但该数据库的文件(.MD ...

  2. testdb11b root.sh执行结果

    [root@testdb11b dev]# /u01/app//grid/root.sh Performing root user operation for Oracle 11g The follo ...

  3. Mybatis 使用maven插件mybatis-generator自动生成entities和SQL和mapper

    第一步:在pom中添加该插件的配置,我直接把pom贴上来好了 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  4. 移动WEB前端开发资源整合

    meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,m ...

  5. 对LR关联的一些理解

    从接触LR关联的迷茫,到现在略有感悟,小记期间的一些理解. 一开始认识关联是在LR自带学习例子,需要关联session,也知道了自动关联,手动关联以及边录制边关联. 在使用关联的过程中,也学习了web ...

  6. supervisor拉起daemon进程(falcon-agent)测试

    falcon-agent started..., pid= falcon-agent now is running already, pid= falcon-agent now is running ...

  7. How to print 如何输出 int64_t，uint64_t的值 in C

    For int64_t type: int64_t t; printf("%"PRId64"\n", t); for uint64_t type: uint64 ...

  8. Codeforces Round #370 - #379 (Div. 2)

    题意: 思路: Codeforces Round #370(Solved: 4 out of 5) A - Memory and Crow 题意:有一个序列,然后对每一个进行ai = bi - bi  ...

  9. input的实时监控

    <input id="phone" type="tel" placeholder="请输入手机号"> $("#phon ...

  10. 试听笔记：javascript入门精通

    一.数据类型 1.原始类型:number.string.boolean.null.undefined 2.对象类型:Object (Function.Array.Date...) P.类型隐式转换:' ...