一 DOM基础

1 DOM介绍

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

2 DOM树

上图可知，在HTML当中，一切都是节点：（非常重要）

  • 元素节点：HMTL标签。

  • 文本节点：标签中的文字（比如标签之间的空格、换行）

  • 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

3  DOM节点的获取

  1.  var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
  2.  
  3.      var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
  4.  
  5.      var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

4 （获取，更改，删除，节点属性）

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>DOM基础</title>
  6.  </head>
  7.  <body>
  8.  <img src="./1.jpg" alt="a" id="a1" title="手机图片" class="image">
  9.  <script type="text/javascript">
  10.      //获取节点属性值
  11.      var myNode = document.getElementsByTagName("img")[0];
  12.  
  13.      // console.log(myNode.src);
  14.      // console.log(myNode.className);    //注意，是className，不是class
  15.      // console.log(myNode.title);
  16.      //
  17.      // console.log("-----第一种方式-------");
  18.      //
  19.      // console.log(myNode["src"]);
  20.      // console.log(myNode["className"]); //注意，是className，不是class
  21.      // console.log(myNode["title"]);
  22.      // console.log('--------------------第二种方式-----------');
  23.      // console.log(myNode.getAttribute("src"));
  24.      // console.log(myNode.getAttribute("class"));   //注意是class，不是className
  25.      // console.log(myNode.getAttribute("title"));
  26.      //设置节点属性值
  27.      // console.log("-----第一种方式-------");
  28.      // myNode.src='./2.jpg';
  29.      // myNode.className='image2';
  30.      console.log('--------------------第二种方式------');
  31.       myNode.setAttribute("src","./3.jpg");
  32.      myNode.setAttribute("class","image3-box");
  33.      myNode.setAttribute("id","你好");
  34.      //删除节点的属性
  35.      myNode.removeAttribute('class');
  36.      myNode.removeAttribute('id');
  37.  </script>
  38.  </body>
  39.  </html>

5 （创建 添加节点属性）

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>DOM操作</title>
  6.  </head>
  7.  <body>
  8.  <div id="box">
  9.      <p id="p1">1113</p>
  10.  
  11.  </div>
  12.  <button id="btn">
  13.      添加元素
  14.  </button>
  15.  <script>
  16.      //获取文档
  17.      console.log(document);
  18.      //获取的html对象
  19.      console.dir(document.documentElement);
  20.      console.dir(document.getElementsByTagName('html')[0]);
  21.      //获取body
  22.      console.log(document.body);
  23.      var oBtn=document.getElementById('btn');
  24.      var oBox=document.getElementById('box');
  25.      var op1=document.getElementById('p1');
  26.      oBtn.onclick=function () {
  27.          var op=document.createElement('p');//创建标签
  28.          // // op.innerText=123;//添加文本
  29.          op.innerHTML='<a href="#">123</a>';//添加标签
  30.          // oBox.appendChild(op);//追加孩子节点
  31.  
  32.          op.style.color='red';
  33.          console.log(op.parentNode);//获取p标签的父节点是div
  34.          console.log(op.children[0]);//获取p标签的子节点是  a
  35.          console.log(oBox.nextElementSibling.innerHTML);//火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）,就是div下面的button标签
  36.          oBox.insertBefore(op,op1);//在参考标签之前添加一个标签，op1是参考标签，op是要添加的标签
  37.  
  38.      }
  39.  
  40.  </script>
  41.  
  42.  </body>
  43.  </html>

二 DOM事件操作

1 实例：效果是点击浏览器上面的盒子，弹出内容

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          #box1{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.  <div id="box1"></div>
  16.  
  17.  <script type="text/javascript">
  18.      // 1、获取事件源
  19.      var div = document.getElementById("box1");
  20.      // 2、绑定事件
  21.      div.onclick = function () {
  22.          // 3、书写事件驱动程序
  23.          alert("我是弹出的内容");
  24.      }
  25.  </script>
  26.  
  27.  </body>
  28.  </html>

常见事件如下

2  利用DOM去更改一些属性设置盒子切换的大小和颜色

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>DOM事件</title>
  6.      <style>
  7.          .box1{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.          }
  12.          /*.active{*/
  13.              /*background-color: yellow;*/
  14.          /*}*/
  15.  
  16.      </style>
  17.      <script>
  18.          //js入口函数，当文档和图片都加载完成之后，入口函数才调用叫window
  19.          window.onload=function() {
  20.              console.log(111);
  21.              var oDiv=document.getElementById('box');//获取id
  22.              console.dir(oDiv);
  23.              console.log(oDiv.id);
  24.              console.log(oDiv.className);
  25.              // 第一种写法
  26.              var isRed=true;
  27.              oDiv.onclick=function () { //添加一个点击事件
  28.                  if (isRed){
  29.                        oDiv.style.backgroundColor='black';
  30.                        oDiv.style.width='300px';
  31.                        isRed=false
  32.                  }else{
  33.                      oDiv.style.backgroundColor='red';
  34.                      oDiv.style.width='200px';
  35.                      isRed=true;
  36.                  }
  37.  
  38.              };
  39.  
  40.          };
  41.      </script>
  42.  </head>
  43.  <body>
  44.      <div id="box" class="box1 active">
  45.      </div>
  46.  
  47.  </body>
  48.  </html>

3  利用dom去操作图片的不断切换

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>DOM事件</title>
  6.      <style>
  7.  
  8.      </style>
  9.      <script>
  10.  
  11.          // -------------第二种例子，图片切换--------------------------------
  12.          window.onload=function (ev) {
  13.                  var oimg=document.getElementsByTagName('img')[0];//获取第一个img标签
  14.                  console.log(oimg);
  15.                  var obtn=document.getElementsByClassName('btn')[0];//获取第一个btn类名
  16.                  obtn.style.width='100px';//可以单独设置btn按钮的样式
  17.                  obtn.style.height='100px';
  18.                  var tu=true;//设置添加为true
  19.                  obtn.onclick=function(){
  20.  
  21.                      if (tu){
  22.                           oimg.src='./1.jpg';//第一次默认是1图片
  23.                           console.log(oimg.id);//获取img的id,相当于get
  24.                           oimg.id='lv';//相当于set
  25.                           tu=false
  26.  
  27.                      }else{
  28.                          oimg.src='./2.jpg';
  29.                          tu=true
  30.                      }
  31.  
  32.              }
  33.  
  34.          }
  35.  
  36.      </script>
  37.  </head>
  38.  <body>
  39.      <div id="box" class="box1 active">
  40.      </div>
  41.      <img src="./2.jpg" alt="手机" title="小米" id="one">
  42.      <!--<img src="./3.jpg" alt="手机" title="小米" id="two">-->
  43.      <button class="btn">切换</button>
  44.  </body>
  45.  </html>

12-3 DOM操作的更多相关文章

  1. 第12章 DOM操作

    目录 *1. 向DOM中注入HTML 1.1 将HTNL字符串转换成DOM 预处理HTML源字符串 包装HTML 1.2 将DOM元素插入到文档中 2. DOM的特性和属性 通过DOM方法和属性访问特 ...

  2. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  3. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  4. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  5. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  6. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  7. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  8. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  9. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  10. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

随机推荐

  1. ACMer之歌

    <<死了都要编>> 死了都要编 不动态规划不痛快 算法多深只有这样 才足够表白 死了都要编 不A星算法不痛快 宇宙毁灭星还在 把每天当成是比赛来编程 一分一秒都编到汗水掉下来 ...

  2. CesiumLab V1.4 新功能 BIM数据处理

    我也没想到,BIM数据处理一下拖了这么久才有个交代.我们照例先放图   Revit官方的示例数据   隐藏屋顶+俯视   曾经因为太大而无法导出无法处理的医院模型   室内装修方案模型 最近和很多做b ...

  3. dede list调用 内容模型 附件

    当我们在list列表页调用内容模型的附件时,会调用出来一个表,数据被包含在表格里面 下面修改这个表格 找到  templets>system>channel_addon.htm文件 < ...

  4. Flask – SQLAlchemy成员增加

    目录 简介 结构 展示 技术 运行 代码 创建数据库表单 views视图 home主页 添加成员addnew.html 展示页show_all 简介 结构 $ tree -I "__pyca ...

  5. js 正则去除html代码

    function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html标记 }

  6. js实现自由落体

    实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...

  7. Sql server定时执行某个sql 通过Windows 计划任务(非代理Job方式）

    建立 bat文件.内容如下: osql -s "xxx.xxx.xx.x" -U sa -P sa -d DB -i TruncateSql.sql osql -S "l ...

  8. Python3.7.4入门-6/7错误和异常/类

    6 错误和异常 while True: try: x = int(input("Please enter a number: ")) break except ValueError ...

  9. Appium 常用的API函数

    常用的API函数[转] http://blog.sina.com.cn/s/blog_68f262210102vzf9.html 获取信息类API (1)获取默认系统语言对应的Strings.xml文 ...

  10. Spark day06

    SparkStreaming简介 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, ...