定义

文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。

查找元素

1.直接查找

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

练习：

  1. <div id="i1">床前明月光，疑是地上霜</div>
  2.     <a>111</a>
  3.     <a>222</a>
  4.     <a>333</a>
  1. //获取ID
  2. document.getElementById('i1')
  3.  
  4. //获取内容
  5. document.getElementById('i1').innerText
  6.  
  7. //内容重新赋值
  8. document.getElementById('i1').innerText = '举头望明月，低头思故乡'
  9.  
  10. //获取TagName（'a'）集合
  11. document.getElementsByTagName('a')
  12.  
  13. //获取集合指定索引元素
  14. document.getElementsByTagName('a')[1]
  15.  
  16. //对单个元素重新赋值
  17. document.getElementsByTagName('a')[1].innerText = 666

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. <div>
  2.             <div>c1Sibling</div>
  3.             <div>c1</div>
  4.         </div>
  5.         <div>
  6.             <div>c2Sibling</div>
  7.             <div id="i1">c2</div>
  8.         </div>
  9.         <div>
  10.             <div>c3Sibling</div>
  11.             <div>c3</div>
  12.         </div>
  1.  //获取ID
  2. tag = document.getElementById('i1');
  3.  
  4. //获取ID的父亲
  5. tag.parentElement
  6.  
  7. <div>
  8.             <div>c2Sibling</div>
  9.             <div id="i1">c2</div>
  10.  </div>
  11.  
  12. //获取父亲的上一个兄弟
  13. tag.parentElement.previousElementSibling
  14.  
  15. <div>
  16.             <div>c1Sibling</div>
  17.             <div>c1</div>
  18. </div>
  19.  
  20. //获取父亲的上一个兄弟的第一个儿子
  21. tag.parentElement.previousElementSibling.firstElementChild
  22.  
  23. <div>c1Sibling</div>

内容操作

（1）内容

  1. innerText   文本
  2. innerHTML   HTML内容(包括元素、注释和文本节点)
    value       获取input/select/textarea里面输入的内容

（2）属性

  1. attributes           获取所有标签属性
  2. getAttribute()       获取指定标签属性
  3. setAttribute()       设置指定标签属
  4. removeAttribute()    移除指定标签属

class操作

  1. 对所有样式操作
    className                  // 获取所有类名
  2. classList.remove(class)    // 删除指定类
  3. classList.add(class)       // 添加类
  4.  
  5. 对单个样式操作
    obj.style.fontSize='16px'
    obj.style.backgroundColor='red'

事件

  1. onmousecover    鼠标移到某元素之上
  2. onmouseout      鼠标从某元素离开
  3. onfocus         元素获得聚焦
  4. onblur          元素失去焦点

实例

1.模态框（添加，全选，取消，反选）

功能：

（1）点击添加 -->弹出框输入内容-->点取消后，弹出框关闭

（2）全选，取消，反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.  
  8.         .hide{
  9.             display: none;
  10.         }
  11.         .c1{
  12.             position: fixed;
  13.             left: 0;
  14.             top: 0;
  15.             right: 0;
  16.             bottom: 0;
  17.             background-color: black;
  18.             opscity:0.6;
  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="CancelAll()">
  38.         <input type="button" value="反选" onclick="ReverseAll()">
  39.         <table>
  40.             <thread>
  41.                 <tr>
  42.                     <th>选择</th>
  43.                     <th>主机名</th>
  44.                     <th>端口</th>
  45.                 </tr>
  46.             </thread>
  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"></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>194</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.     <script>
  82.         function ShowModel() {
  83.             document.getElementById('i1').classList.remove('hide');
  84.             document.getElementById('i2').classList.remove('hide');
  85.         }
  86.         function HideModel() {
  87.             document.getElementById('i1').classList.add('hide');
  88.             document.getElementById('i2').classList.add('hide');
  89.         }
  90.         function ChooseAll() {
  91.             var tbody = document.getElementById('tb');
  92.             var tr_list = tbody.children;
  93.             for(var i = 0;i < tr_list.length;i += 1){
  94.                 var current_tr = tr_list[i];
  95.                 var checkbox = current_tr.children[0].children[0];
  96.                 checkbox.checked = true;
  97.             }
  98.  
  99.         }
  100.         function CancelAll() {
  101.             var tbody = document.getElementById('tb');
  102.             var tr_list = tbody.children;
  103.             for(var i = 0;i < tr_list.length;i += 1){
  104.                 var current_tr = tr_list[i];
  105.                 var checkbox = current_tr.children[0].children[0];
  106.                 checkbox.checked = false;
  107.             }
  108.  
  109.         }
  110.         function ReverseAll() {
  111.             var tbody = document.getElementById('tb');
  112.             //获取所有tr
  113.             var tr_list = tbody.children;
  114.             for(var i = 0;i < tr_list.length;i += 1){
  115.                 //循环所有的tr
  116.                 var current_tr = tr_list[i];
  117.                 //获取<input type="checkbox">
  118.                 var checkbox = current_tr.children[0].children[0];
  119.                 if(checkbox.checked){
  120.                     checkbox.checked = false;
  121.                 }else{
  122.                     checkbox.checked = true;
  123.                 }
  124.             }
  125.  
  126.         }
  127.     </script>
  128.  
  129. </body>
  130. </html>

 2.后台管理页面布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body{
  8.             margin: 0;
  9.         }
  10.         .left{
  11.             float: left;
  12.         }
  13.         .pg-header{
  14.             height: 48px;
  15.             background-color: #2459a2;
  16.             color:white;
  17.             line-height: 48px;
  18.         }
  19.         .pg-header .logo{
  20.             width:200px;
  21.             background-color: cadetblue;
  22.             text-align: center;
  23.         }
  24.         .pg-header .user{
  25.             margin-right: 60px;
  26.             padding: 0 20px;
  27.             color: white;
  28.             height: 48px;
  29.             position: relative;
  30.         }
  31.         .pg-header .user:hover{
  32.             background-color: #204982;
  33.         }
  34.         .pg-header .user .a img{
  35.             height: 40px;
  36.             width: 40px;
  37.             margin-top: 4px;
  38.             border-radius: 50%;
  39.         }
  40.         .pg-header .user .b{
  41.             z-index: 20;
  42.             position: absolute;
  43.             top: 48px;
  44.             right: 44px;
  45.             background-color: white;
  46.             color: black;
  47.             width: 80px;
  48.             display: none;
  49.         }
  50.         .pg-header .user:hover .b{
  51.             display: block;
  52.         }
  53.         .pg-header .user .b a{
  54.             display: block;
  55.         }
  56.         .right{
  57.             float:right
  58.         }
  59.         .pg-content .menu{
  60.             position:fixed;
  61.             top:48px;
  62.             left: 0;
  63.             bottom: 0;
  64.             right: 0;
  65.             width: 200px;
  66.             background-color: #dddddd;
  67.         }
  68.         .pg-content .content{
  69.             position:fixed;
  70.             top:48px;
  71.             left: 200px;
  72.             bottom: 0;
  73.             right: 0;
  74.             z-index: 9;
  75.             background-color: purple;
  76.             overflow: auto;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <div class="pg-header">
  82.         <div class="logo left">logo</div>
  83.         <div class="user right">
  84.             <a class="a img">登陆</a>
  85.             <div class="b">
  86.                 <a>我的资料</a>
  87.                 <a>注销</a>
  88.             </div>
  89.         </div>
  90.     </div>
  91.     <div class="pg-content">
  92.         <div class="menu left">目录</div>
  93.         <div class="content left">内容</div>
  94.     </div>
  95. </body>
  96. </html>

3.鼠标焦点

onfocus   获得焦点

onblur      失去焦点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="width: 600px;margin: 0 auto;">
  9.         <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
  10.     </div>
  11.  
  12.     <script>
  13.         function Focus() {
  14.             var tag = document.getElementById('i1');
  15.             var val = tag.value;
  16.             if(val == "请输入关键字"){
  17.                 tag.value = ""
  18.             }
  19.         }
  20.         function Blur() {
  21.             var tag = document.getElementById('i1');
  22.             var val = tag.value;
  23.             if(val.length == 0){
  24.                 tag.value = "请输入关键字"
  25.             }
  26.         }
  27.     </script>
  28. </body>
  29. </html>

4.创建标签

点“添加” 可以创建text输入框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" onclick="xxx()" value="添加">
  9.     <div id="i1">
  10.         <p><input type="text"></p>
  11.     </div>
  12.     <script>
  13.         function xxx() {
  14.              //创建标签
  15.             //将标签添加到i1里面
  16.             var tag=document.createElement("input");
  17.             //添加属性
  18.             tag.setAttribute("type","text");
  19.             //设置样式
  20.             tag.style.fontSize="16px";
  21.             tag.style.border="1px solid red";
  22.             var p=document.createElement("p");
  23.             //把tag放到p里面
  24.             p.append(tag);
  25.             document.getElementById('i1').appendChild(p)
  26.         }
  27.     </script>
  28. </body>
  29. </html>

 5.鼠标高亮显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table border="1" width="300px">
  9.         <tr>
  10.             <td>1</td>
  11.             <td>2</td>
  12.             <td>3</td>
  13.         </tr>
  14.         <tr>
  15.             <td>1</td>
  16.             <td>2</td>
  17.             <td>3</td>
  18.         </tr>
  19.         <tr>
  20.             <td>1</td>
  21.             <td>2</td>
  22.             <td>3</td>
  23.         </tr>
  24.     </table>
  25.     <script>
  26.         var myTrs=document.getElementsByTagName('tr');
  27.         for(var i=0; i < myTrs.length; i++){
  28.             myTrs[i].onmousemove = function(){
  29.                 this.style.backgroundColor='red';
  30.             }
  31.             myTrs[i].onmouseout = function(){
  32.                 this.style.backgroundColor=""
  33.             }
  34.         }
  35.     </script>
  36. </body>
  37. </html>

4.DOM的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. Database Change Notification

    使用java监控oracle数据库的变化,主要是针对表数据,如果发生变化,使用select去查询,能够达到推送的目的 package com.test.notifi; import java.sql. ...

  2. unity skybox天空盒分享无需下载

    大概有几十种还是100种,具体忘了 反正很多就是了(哈哈哈哈哈!!!!!!!!!!!!) 老铁们, 多谢支持,谢谢大家. 根据需要使用,下面会分享出下载链接: 链接:https://pan.baidu ...

  3. 数组遍历for forEach for..in for..of

    最开始接触的遍历for 通过下标获取数组每一项的值 ,,]; ;i<num.length;i++) { console.log(num[i]) } /*打印2 5 7*/ forEach遍历数组 ...

  4. Handler Timer TimerTask ScheduledExecutor 循环任务解析

    使用Handler执行循环任务 private Handler handler = new Handler(); private int mDelayTime = 1000; private Runn ...

  5. [CSAcademy]Find the Tree

    [CSAcademy]Find the Tree 题目大意: 交互题. 有一棵\(n(n\le2000)\)个结点的树,但是你并不知道树的形态.你可以调用\({\rm query}(x,y,z)\)( ...

  6. centos7 安装python3.7.11 笔记

    安装python依赖包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-deve ...

  7. java用jsoup解析HTML

    步骤 1获取document对象 //方法一 Document doc = Jsoup.connect(网址).get() //方法二 Document doc = Jsoup.parse(html字 ...

  8. iOS 开发中keyChain的使用

    我们开发中很多数据都是直接存储到本地沙盒中的,这样当应用程序被卸载后,本地的数据都会被删除.如果我们不想让数据在卸载程序的时候丢失,我们可以用KeyChain来存储我们想要的数据.苹果提供了原生的一套 ...

  9. .NET题目(收集来自网络)

    1: .NET和c#有什么区别? 答: .NET一般是指.NET FrameWork框架,是一种平台,一种技术 c#是一种编程语言,是可以基于.NET平台的应用 2: c#中的委托是什么?事件是不是一 ...

  10. 批量删除Excel里面的换行符

    关于批量删除excel里面的换行符,应该说写程序的遇上excel大体都会有这么个问题,在解决这个问题前,我的解决办法是把excel 的数据全部复制到txt里面, 因为操作txt比操作excel更为简单 ...