Dom：document。相当于把所有的html文件，转换成了文档对象。

之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。 
让人动起来，就得先找到他，再修改它内容或属性。

  • 找到标签
  • 操作标签

一、查找元素

1、直接查找

  1. document.getElementById('i1')           根据ID获取一个元素
  2. document.getElementsByTagName('div')    根据标签名获取标签集合
  3. document.getElementsByClassName('div')  获取class多个元素(列表)
  4. document.getElementsByName              获取name多个元素(列表)

　　查找操作练习

  1. <body>
  2.     <div id="1">我是FGF</div>
  3.     <a>FFFFFFFFF</a>
  4.     <a>27272727272</a>
  5.     <a>gggggggggggg</a>
  6. </body>

　　

  1. > document.getElementById('1')
  2. <div id=​"1">​我是FGF​</div>​
  3. > document.getElementById('1').innerText
  4. "我是FGF"
  5. > document.getElementById('1').innerText = '新内容'
  6. "新内容"
  7. > document.getElementsByTagName('a')
  8. [a, a, a]0: aaccessKey: ""assignedSlot: nullattributes: NamedNodeMapbaseURI: "http://localhost:……"
  9. > document.getElementsByTagName('a')[1]
  10. <a>​27272727272​</a>​
  11. > document.getElementsByTagName('a')[1].innerText = 666
  12. 666
  13. > tags = document.getElementsByTagName('a')
  14. [a, a, a]
  15. > for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
  16. 777

　　

2、间接查找

  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、内容操作

  1. 标签.innerText        获取标签中的文本内容
  2. 标签.innerText = ""   对标签内部文本进行重新复制
  3. outerText
  4. innerHTML             HTML内容
  5. innerHTML
  6. value                 值

　　

2、样式操作(更改css相关的选择器）

  1. className
  2.     tag.className='c1'            直接整体做操作
  3.     tag.classList.add('c2')       添加指定样式
  4.     tag.classList.remove('c2')    删除指定样式
  5.  
  6. PS：onclick点击操作
  7.     <div onclick='func();'>点我</div>
  8.     <script>
  9.         function func(){
  10.         }
  11.     </script>

　　

三、示例

1、示例之模态对话框（弹出框）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .c1{
  11.             position: fixed;
  12.             left: 0;
  13.             top: 0;
  14.             right: 0;
  15.             bottom: 0;
  16.             background-color: black;
  17.             opacity: 0.6;
  18.             z-index: 9;
  19.         }
  20.         .c2{
  21.             width: 500px;
  22.             height: 400px;
  23.             background-color: white;
  24.             position: fixed;
  25.             left: 50%;
  26.             top: 50%;
  27.             margin-left: -250px;
  28.             margin-top: -200px;
  29.             z-index: 10;
  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.     <!--弹出框（模态框）开始-->
  41.     <div id="i2" class="c2 hide">
  42.         <p><input type="text" /></p>
  43.         <p><input type="text" /></p>
  44.         <p>
  45.             <input type="button" value="取消" onclick="HideModel();" />
  46.             <input type="button" value="确定" onclick="HideModel();" />
  47.         </p>
  48.     </div>
  49.     <!--弹出框（模态框）结束-->
  50.     <script>
  51.         function ShowModel(){
  52.             document.getElementById('i1').classList.remove('hide');
  53.             document.getElementById('i2').classList.remove('hide');
  54.         }
  55.         function HideModel(){
  56.             document.getElementById('i1').classList.add('hide');
  57.             document.getElementById('i2').classList.add('hide');
  58.         }
  59.     </script>
  60. </body>
  61. </html>

　　

2、示例之全选和反选以及取消

  1. checkbox
  2.     获取值
  3.     checkbox对象.checked
  4.     设置值
  5.     checkbox对象.checked = true

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .c1{
  11.             position: fixed;
  12.             left: 0;
  13.             top: 0;
  14.             right: 0;
  15.             bottom: 0;
  16.             background-color: black;
  17.             opacity: 0.6;
  18.             z-index: 9;
  19.         }
  20.         .c2{
  21.             width: 500px;
  22.             height: 400px;
  23.             background-color: white;
  24.             position: fixed;
  25.             left: 50%;
  26.             top: 50%;
  27.             margin-left: -250px;
  28.             margin-top: -200px;
  29.             z-index: 10;
  30.         }
  31.     </style>
  32. </head>
  33. <body style="margin: 0;">
  34.     <div>
  35.         <input type="button" value="添加" onclick="ShowModel();" />
  36.         <input type="button" value="全选" onclick="ChooseAll();" />
  37.         <input type="button" value="取消" onclick="CancleAll();" />
  38.         <input type="button" value="反选" onclick="ReverseAll();" />
  39.         <table>
  40.             <thead>
  41.                 <tr>
  42.                     <th>选择</th>
  43.                     <th>主机名</th>
  44.                     <th>端口</th>
  45.                 </tr>
  46.             </thead>
  47.             <tbody id="tb">
  48.                 <tr>
  49.                     <td>
  50.                         <input type="checkbox" />
  51.                     </td>
  52.                     <td>1.1.1.1</td>
  53.                     <td>190</td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td><input type="checkbox"f id="test" /></td>
  57.                     <td>1.1.1.2</td>
  58.                     <td>192</td>
  59.                 </tr>
  60.                 <tr>
  61.                     <td><input type="checkbox" /></td>
  62.                     <td>1.1.1.3</td>
  63.                     <td>193</td>
  64.                 </tr>
  65.             </tbody>
  66.         </table>
  67.     </div>
  68.  
  69.     <!-- 遮罩层开始 -->
  70.     <div id="i1" class="c1 hide"></div>
  71.     <!-- 遮罩层结束 -->
  72.     <!-- 弹出框开始 -->
  73.     <div id="i2" class="c2 hide">
  74.         <p><input type="text" /></p>
  75.         <p><input type="text" /></p>
  76.         <p>
  77.             <input type="button" value="取消" onclick="HideModel();"/>
  78.             <input type="button" value="确定"/>
  79.         </p>
  80.     </div>
  81.     <!-- 弹出框结束 -->
  82.  
  83.     <script>
  84.         function ShowModel(){
  85.             document.getElementById('i1').classList.remove('hide');
  86.             document.getElementById('i2').classList.remove('hide');
  87.         }
  88.         function HideModel(){
  89.             document.getElementById('i1').classList.add('hide');
  90.             document.getElementById('i2').classList.add('hide');
  91.         }
  92.  
  93.         function ChooseAll(){
  94.             var tbody = document.getElementById('tb');
  95.             // 获取所有的tr
  96.             var tr_list = tbody.children;
  97.             for(var i=0;i<tr_list.length;i++){
  98.                 // 循环所有的tr，current_tr
  99.                 var current_tr = tr_list[i];
  100.                 var checkbox = current_tr.children[0].children[0];
  101.                 checkbox.checked = true;
  102.             }
  103.         }
  104.  
  105.         function CancleAll(){
  106.             var tbody = document.getElementById('tb');
  107.             // 获取所有的tr
  108.             var tr_list = tbody.children;
  109.             for(var i=0;i<tr_list.length;i++){
  110.                 // 循环所有的tr，current_tr
  111.                 var current_tr = tr_list[i];
  112.                 var checkbox = current_tr.children[0].children[0];
  113.                 checkbox.checked = false;
  114.             }
  115.         }
  116.  
  117.         function ReverseAll(){
  118.             var tbody = document.getElementById('tb');
  119.             // 获取所有的tr
  120.             var tr_list = tbody.children;
  121.             for(var i=0;i<tr_list.length;i++){
  122.                 // 循环所有的tr，current_tr
  123.                 var current_tr = tr_list[i];
  124.                 var checkbox = current_tr.children[0].children[0];
  125.                 if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}
  126.  
  127.     </script>
  128. </body>
  129. </html>

　　

3、示例之后台管理左侧菜单

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

　　

JavaScript HTMlL DOM对象（上）的更多相关文章

  1. JavaScript HTMlL DOM对象（下）

    DOM:document operation model 文档操作模型 每个标签都是一个对象. 一.查找元素 DOM 回顾 直接查找 var obj = document.getElementById ...

  2. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  3. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  4. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  5. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  6. JavaScript之DOM对象获取（1）

    我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...

  7. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  8. 深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...

  9. JavaScript与DOM（上）

    本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/1 ...

随机推荐

  1. HttpClient来自官方的JSON扩展方法

    System.Net.Http.Json Json的序列化和反序列化是我们日常常见的操作,通过System.Net.Http.Json我们可以用少量的代码实现上述操作.正如在github设计文档中所描 ...

  2. 【php】面向对象（二）

    一. 封装: a) 描述:使用成员修饰符修饰成员属性和成员方法,能够最大限度的隐藏对象内部的细节,保证对象的安全 b) PPP修饰符:public(公共的),protected(受保护的),priva ...

  3. 如何在 Array.forEach 中正确使用 Async

    本文译自How to use async functions with Array.forEach in Javascript - Tamás Sallai. 0. 如何异步遍历元素 在第一篇文章中, ...

  4. 来，让我们一起来学习VIM

    什么是VIM vim是一个高度可定制的文本编辑器,被很多专业的程序员使用,并获得了程序员的一致好评. 下图是Vim的官网vim.org 你可以在Vim的官网免费下载并使用Vim,同样可以在Vim官网学 ...

  5. 使用tap、Fragment等相关相关知识点。实现类似微信的界面

    实验结果,可以实现通过左右活动来切换不同的界面.也可以通过点击不同的下方按钮来实现切换不同的界面. 自己也添加了相关的自己编写的小页面来展示相关的效果.主要的是对于碎片Fragment对于tap的相关 ...

  6. MySQL学习之路4-数据的导入导出

    数据的导入 通过数据库管理工具,先建表,然后导入表记录. 通过sql语句导入: load data local infile '表路径' into table stuscore fields term ...

  7. Google Adsense付款方式添加西联付款

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. Google Adsens ...

  8. Android Google Play app signing 最终完美解决方式

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/105561341 本文出自[赵彦军的博客] 在 GooglePlay 创建 App ...

  9. SQL数据类型：nchar，char，varchar，nvarchar 的区别和应用场景

    概括: char:固定长度,存储ANSI字符,不足的补英文半角空格.CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义CHAR(10),那么不论你存储的数据是否达到了10个字节,都要占 ...

  10. 数据结构和算法(Golang实现)(18)排序算法-前言

    排序算法 人类的发展中,我们学会了计数,比如知道小明今天打猎的兔子的数量是多少.另外一方面,我们也需要判断,今天哪个人打猎打得多,我们需要比较. 所以,排序这个很自然的需求就出来了.比如小明打了5只兔 ...