整理了一下JS的DOM操作语法，这里记录一下。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>js的DOM操作</title>
  6.      <style type="text/css">
  7.          .dvClass{
  8.              width: 300px;
  9.              height: 400px;
  10.              background-color: red;
  11.          }
  12.  
  13.          .divHide{
  14.              width: 500px;
  15.              height: 300px;
  16.              background-color: red;
  17.              margin: 0 auto;
  18.          }
  19.  
  20.          .divBorder{
  21.              width: 200px;
  22.              height: 150px;
  23.              float: left;
  24.              border: 1px solid #000;    /*#000是黑色*/
  25.              margin-left: 20px;
  26.              text-align: center;
  27.              line-height: 165px;
  28.              font-size: 19px;
  29.          }
  30.  
  31.          #querySel{
  32.  
  33.          }
  34.      </style>
  35.  </head>
  36.  <body>
  37.      <input type="button" value="确定" id="btn">
  38.      <input type="button" value="确定">
  39.      <input type="button" value="确定">
  40.  
  41.      <div id="dv">你好</div>
  42.      <div id="dv3"><p>新年好</p></div>
  43.      <div>大家好</div>
  44.  
  45.      <img src="" id="picture">
  46.  
  47.      <img src="desk.jpg" id="picture2">
  48.  
  49.      <a href="desk.jpg" id="aid"><img src="deskSmall.jpg" id="srcid"></a>
  50.  
  51.      <div class="divHide" id="dv2"></div>
  52.      <input type="button" value="显示" id="show">
  53.      <input type="button" value="隐藏" id="hide">
  54.      <input type="button" value="隐藏" name="" id="showAndHide">
  55.  
  56.      <input type="text" name="" id="tx">
  57.      <input type="button" name="" value="只读" id="btn1">
  58.  
  59.      <a href="www.baidu.com" id="a1">百度</a>
  60.  
  61.      <ul id="ul1">
  62.          <li>隔行变色</li>
  63.          <li>隔行变色</li>
  64.          <li>隔行变色</li>
  65.          <li>隔行变色</li>
  66.      </ul>
  67.      <hr>
  68.      <ul>
  69.          <li>隔行变色</li>
  70.          <li>隔行变色</li>
  71.          <li>隔行变色</li>
  72.          <li>隔行变色</li>
  73.      </ul>
  74.      <input type="button" name="" value="点击变色" id="btn2">
  75.  
  76.      <ul id="ul2">
  77.          <li>隔行变色</li>
  78.          <li>隔行变色</li>
  79.          <li>隔行变色</li>
  80.          <li>隔行变色</li>
  81.      </ul>
  82.  
  83.      <div class="divBorder">111</div>
  84.      <div class="divBorder">222</div>
  85.      <div class="divBorder">333</div>
  86.  
  87.      <input type="text" name="" value="请输入内容" id="getFocus">
  88.  
  89.      <div id="querySel">12345</div>
  90.      <input type="button" name="" value="选择器获取元素" id="btn3">
  91.  
  92.      <div>aaa</div>
  93.      <div>bbb</div>
  94.      <div>ccc</div>
  95.      <input type="button" name="" value="setAttribute" id="setAtt">
  96.  
  97.      <div id="dv4">
  98.          <p id="p1">11</p>
  99.          <span>22</span>
  100.          <ul>
  101.              <li>33</li>
  102.              <li>44</li>
  103.              <li>55</li>
  104.          </ul>
  105.      </div>
  106.      <input type="button" name="" value="创建" id="create">
  107.  
  108.      <div id="uu"></div>
  109.      <input type="button" name="" value="创建" id="create2">
  110.  
  111.      <div id="delDiv">
  112.          <p>11</p>
  113.          <span>22</span>
  114.          <p>33</p>
  115.          <span>中国</span>
  116.      </div>
  117.      <input type="button" name="" value="删除" id="del">
  118.  
  119.      <script type="text/javascript">
  120.          /*获取元素对象的方法*/
  121.          document.getElementById("id的值");
  122.          document.getElementsByTagName("标签名");        //返回的是数组
  123.          document.getElementsByTagName("name的值");    //返回的是数组
  124.          document.getelementsByClassName("class的值");    //返回的是数组
  125.          document.getElementById("btn3").onclick=function(){
  126.              var obj=document.querySelector("#querySel");    //根据选择器名（id选择器、类选择器）获取元素，并给元素内属性赋值
  127.              obj.style.width="300px";
  128.              obj.style.height="200px";
  129.              obj.style.backgroundColor="red";
  130.          }
  131.  
  132.          /*鼠标点击事件*/
  133.          //点击按钮，弹出对话框
  134.          var btnClick=document.getElementById("btn");    //通过document.getElementById()方法返回一个document对象，getElementById("btn")的作用是找到值为btn的id
  135.          btnClick.onclick=function(){    //定义一个点击事件
  136.              alert("hello world!");    //弹出框
  137.          }
  138.  
  139.          //点击按钮，通过标签id，改变div标签里面的内容
  140.          document.getElementById("btn").onclick=function(){
  141.              document.getElementById("dv").innerText="你好，世界";
  142.              //document.getElementById("dv3").innerText="新年好啊";    //因为dv3的内容是写在p标签里的，所以不能用innerText，否则p标签会消失
  143.              document.getElementById("dv3").innerHTML="新年好啊啊啊";
  144.          }
  145.  
  146.          //点击按钮，通过标签id，改变div标签的样式
  147.          document.getElementById("btn").onclick=function(){
  148.              //第1种方法
  149.              var obj=document.getElementById("dv");
  150.              obj.style.width="300px";
  151.              obj.style.height="300px";
  152.              obj.style.backgroundColor="#000";    //#000是黑色
  153.              obj.style.marginTop="20px";    //设置div上边距为20px
  154.  
  155.              //第2种方法（通过将标签的class属性，改成style里面的类选择器名）
  156.              obj.className="dvClass";    //这里可以同时赋多个className，用空格分隔，比如obj.className="dvClass dvClass2";
  157.          }
  158.  
  159.          //点击按钮，通过标签id，在img标签里，显示图片
  160.          document.getElementById("btn").onclick=function(){
  161.              document.getElementById("picture").src="desk.jpg";
  162.          }
  163.  
  164.          //点击图片，通过this关键字，改变img标签里，图片的宽和高
  165.          document.getElementById("picture2").onclick=function(){
  166.              this.width="300";    //图片的长宽比较特殊，所以不加px
  167.              this.height="300";
  168.          }
  169.  
  170.          //点击按钮，通过标签名字，获取到所有标签
  171.          document.getElementById("btn").onclick=function(){
  172.              var arr=document.getElementsByTagName("div");    //因为标签可能重复，所以通过标签名字获取到的是数组形式
  173.              for(var i=0;i<arr.length;i++){
  174.                  arr[i].innerText="全部改变";
  175.              }
  176.          }
  177.  
  178.          //点击按钮，通过标签id，和this关键字，改变按钮的内容
  179.          document.getElementById("btn").onclick=function(){
  180.              this.value="点击";
  181.          }
  182.  
  183.          //排他功能（即点击按钮后，按钮内容改变，再点击其他按钮，已经改变的按钮内容恢复）
  184.          var arr=document.getElementsByTagName("input");    //通过标签名字获取到的是数组
  185.          for(var i=0;i<arr.length;i++){
  186.              arr[i].onclick=function(){
  187.                  for(var j=0;j<arr.length;j++){
  188.                      arr[j].value="确定";
  189.                  }
  190.                  this.value="点击";
  191.              }
  192.          }
  193.  
  194.          //点击超链接，使图片不在新页面打开，而在当前页面打开
  195.          document.getElementById("srcid").onclick=function(){
  196.              this.src=document.getElementById("aid").href;
  197.              return false;    //必须要有这个
  198.          }
  199.  
  200.          //点击两个按钮，显示和隐藏div
  201.          document.getElementById("hide").onclick=function(){
  202.              document.getElementById("dv2").style.display="none";
  203.          }
  204.          document.getElementById("show").onclick=function(){
  205.              document.getElementById("dv2").style.display="block";
  206.          }
  207.  
  208.          //点击一个按钮，显示和隐藏div
  209.          document.getElementById("showAndHide").onclick=function(){
  210.              if(this.value=="隐藏"){
  211.                  document.getElementById("dv2").style.display="none";
  212.                  this.value="显示";
  213.              }else if(this.value=="显示"){
  214.                  document.getElementById("dv2").style.display="block";
  215.                  this.value="隐藏";
  216.              }
  217.          }
  218.  
  219.          //点击“只读”按钮，让文本框不可编辑
  220.          document.getElementById("btn1").onclick=function(){
  221.              document.getElementById("tx").disabled=true;
  222.          }
  223.  
  224.          //点击超链接，禁止跳转到链接的界面
  225.          document.getElementById("a1").onclick=function(){
  226.              return false;    //这句是禁止跳转的功能
  227.          }
  228.  
  229.          //列表各行变色
  230.          document.getElementById("btn2").onclick=function(){
  231.              var arr=document.getElementById("ul1").getElementsByTagName("li");    //只要第一个列表中的行变色
  232.              for(var i=0;i<arr.length;i++){
  233.                  if(i%2==0){
  234.                      arr[i].style.backgroundColor="red";
  235.                  }
  236.              }
  237.          }
  238.  
  239.          /*鼠标悬停和离开事件*/
  240.          //鼠标移到行上，行的颜色改变
  241.          var arr=document.getElementById("ul2").getElementsByTagName("li");
  242.          for(var i=0;i<arr.length;i++){
  243.              arr[i].onmouseover=function(){    //鼠标悬停事件
  244.                  this.style.backgroundColor="red";
  245.              }
  246.  
  247.              arr[i].onmouseout=function(){
  248.                  this.style.backgroundColor="#FFF";    //鼠标离开事件，#FFF是白色
  249.              }
  250.          }
  251.  
  252.          //div边框高亮显示
  253.          var arr=document.getElementsByTagName("div");
  254.          for(var i=0;i<arr.length;i++){
  255.              arr[i].onmouseover=function(){
  256.                  this.style.border="1px solid red";
  257.              }
  258.              arr[i].onmouseout=function(){
  259.                  this.style.border="1px solid #000";
  260.              }
  261.          }
  262.  
  263.          /*获取焦点和失去焦点事件*/
  264.          //获取到焦点，使文本框内容消失
  265.          document.getElementById("getFocus").onfocus=function(){
  266.              if(this.value=="请输入内容"){    //防止已经输入内容，再次修改时，内容被清空
  267.                  this.value="";
  268.              }
  269.          }
  270.  
  271.          // //失去焦点，使文本框内容恢复
  272.          document.getElementById("getFocus").onblur=function(){
  273.              if(this.value==""){    //避免输入内容后，失去焦点，输入的内容被清空
  274.                  this.value="请输入内容";
  275.              }
  276.          }
  277.  
  278.          /*标签属性*/
  279.          document.getElementById("setAtt").onclick=function(){
  280.              //设置属性
  281.              document.getElementsByTagName("div")[0].setAttribute("class","divBorder");    //[0]代表返回数组中的第一个元素，setAttribute里面分别是属性名和属性值
  282.              //获取属性
  283.              var obj=document.getElementsByTagName("div")[0].getAttribute("class");    //getAttribute里面填属性名就返回属性值，填属性值就返回属性名，没有就返回null
  284.              alert(obj);
  285.              //删除属性
  286.              document.getElementsByTagName("div")[0].removeAttribute("class");
  287.          }
  288.  
  289.          /*节点
  290.          类型：nodeType，值1为标签节点，2为属性节点，3为文本节点
  291.          名字：nodeName，大写的标签名——标签类型，小写的属性名——属性类型，#text——文本类型
  292.          节点的值：nodeValue，null——标签类型，属性值——属性类型，文本内容——文本类型*/
  293.          //获取标签的父节点
  294.          var obj=document.getElementById("p1").parentNode;    //获取父节点
  295.          console.log(obj);    //输出<div id="dv4">，说明P1所在标签的父元素为<div>
  296.          console.log("节点的类型："+obj.nodeType+"，节点的名字："+obj.nodeName+"，节点的值："+obj.nodeValue);
  297.  
  298.          //获取父级元素
  299.          console.log(document.getelement("dv4").parentElement);
  300.  
  301.          //获取子节点
  302.          var obj1=document.getElementById("dv4").childNodes;    //返回的是数组
  303.          console.log(obj1);    //输出：NodeList(7) [ #text, p#p1, #text, span, #text, ul, #text ]，所以一共有7个节点
  304.  
  305.          //获取第一个子节点
  306.          console.log(document.getelement("dv4").firstChild);
  307.  
  308.          //获取最后一个子节点
  309.          console.log(document.getelement("dv4").lastChild);
  310.  
  311.          //获取子元素
  312.          var obj2=document.getElementById("dv4").children;
  313.          console.log(obj2);    //HTMLCollection { 0: p#p1, 1: span, 2: ul, length: 3, … }，所以一共有3个子元素
  314.  
  315.          //获取第一个子元素
  316.          console.log(document.getElementById("dv4").firstElementChild);
  317.  
  318.          //获取最后一个子元素
  319.          console.log(document.getElementById("dv4").lastElementChild);
  320.  
  321.          /*创建标签*/
  322.          //方法1
  323.          document.getElementById("create").onclick=function(){
  324.              document.write("<p>增加的标签</p>");    //这种方式会将html里面其他标签都清空，只留这个增加的
  325.          }
  326.  
  327.          //方法2
  328.          document.getElementById("create").onclick=function(){
  329.              document.getElementById("dv4").innerHTML="<p>哈哈哈哈</p>";    //这种方式会将dv4所在标签内的，子标签都清空，只留增加的
  330.          }
  331.  
  332.          //方法3
  333.          document.getElementById("create").onclick=function(){
  334.              var obj=document.createElement("p");    //先创建一个p标签
  335.              document.getElementById("dv4").appendChild(obj);    //然后添加，这种方式不清空之前的标签，只增加
  336.          }
  337.  
  338.          //创建图片标签
  339.          document.getElementById("create").onclick=function(){
  340.              document.getElementById("dv4").innerHTML="<img src=desk.jpg/>";
  341.          }
  342.  
  343.          //根据数组创建列表标签
  344.          document.getElementById("create2").onclick=function(){
  345.              var arr=["新闻标题1","新闻标题2","新闻标题3","新闻标题4","新闻标题5","新闻标题6"];
  346.              var str="<ul>";
  347.              for(var i=0;i<arr.length;i++){
  348.                  str+="<li>"+arr[i]+"</li>";
  349.              }
  350.              str+="</ul>";
  351.              document.getElementById("uu").innerHTML=str;
  352.          }
  353.  
  354.          /*删除元素*/
  355.          document.getElementById("del").onclick=function(){
  356.              document.getElementById("delDiv").removeChild(document.getElementById("delDiv").firstElementChild);    //删除第一个元素
  357.              document.getElementById("delDiv").removeChild(document.getElementById("delDiv").lastElementChild);    //删除第一个元素
  358.          }
  359.      </script>
  360.  </body>
  361.  </html>

。

JS的DOM操作语法的更多相关文章

  1. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  2. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  3. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  4. JS的BOM操作语法

    整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. 总结js常用的dom操作（js的dom操作API）

    转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...

  6. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  7. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  8. 5月16日上课笔记-js中DOM操作

    一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...

  9. js函数 DOM操作

    回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...

随机推荐

  1. windows设置本地域名解析

    1.首先找到host文件:C:\Windows\System32\drivers\etc 2.打开host文件: # Copyright (c) 1993-2009 Microsoft Corp. # ...

  2. Java基础（二十一）集合（3）List集合

    一.List接口 List集合为列表类型,列表的主要特征是以线性方式存储对象. 1.实例化List集合 List接口的常用实现类有ArrayList和LinkedList,根据实际需要可以使用两种方式 ...

  3. mysql的一些常用操作（二）

    紧跟上一节,我们创建了四个表: Student.Teacher.Course.Score 接下来就是实际的一些操作了:1.求每门课程的学生人数. select course.cname '课程名称', ...

  4. 一:XMind

  5. Android自定义控件：自适应大小的文本控件

    需求 自适应大小的文本: 效果图: 项目开发中,开发人员根据UI人员提供的一套尺寸,布局了一些带文本的页面, 往往会少考虑一些数据极限的问题,造成机型屏幕适配问题. 例如: 文本(或数值)长度可变,如 ...

  6. JDK JRE JVM的区别与关系

    JDK JAVA开发工具包    他包含了JRE   JAVA运行环境   JVM JAVA虚拟机他是跨平台的核心主件   他将Java源文件编译成 .class结尾字节码文件交由不同计算机执行    ...

  7. gym102302E_Chi's performance

    题意 给n个二元组(v,p),要求排序使得v从小到大,而且总价值最大,价值定义为相邻两个v值不同的p值之差绝对值之和. 分析 in a row原来是相邻的意思. 对于每个相同v值的块来说,有用的数只有 ...

  8. LeetCode 11月第1周题目汇总

    开源地址:点击该链接 前言 最近一个多月发现以[每天一题]系列的形式来更新题目并不太合适,一是没有足够多合适的题目来更新,二是单独拿出来一个题来讲不太系统,应该把多个相似的题目放在一起讲,这样才能够达 ...

  9. CentOS 8 发布了

    CentOS 8 的发现注记是: https://wiki.centos.org/Manuals/ReleaseNotes/CentOS8.1905 CentOS 在 2019 年 9 月 25 日 ...

  10. [Hadoop]Hive-1.2.x安装配置+Mysql安装

    HIve的元数据存储在mysql中,需要配置与MySQL建立连接,除了安装MySQL外还要安装连接的jar包:mysql-connector-java-5.1.47.tar.gz   安装环境:Cen ...