安科网

JS中DOM元素的操作

luvhl

luvhl

2020-08-17

关注 关注

一、DOM元素的获取
1）document.getElementsByClassName ( “class”)
返回集 htmlcollection ,用法和数组一致
说明: class为DOM元素上class属性的值
2）document.getElementById( “id” )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
3)document.getElementsByName(" name");
返回的是nodelist 类型, 用法和数组一致
说明: name为DOM元素上name属性的值
4)document.getElementsByTagName(“TagName”);
返回的是htmlcollection 集合 , 用法和数组一致
5) document.querySelector(".btnlist");
返回的是集合
document.querySelectorAll("#btn");
获取所有的#btn
6)document.body
可以直接获取body

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist" name="btn_n">点我一下</button>
<button id="btnn" class="btnof">点我一下</button>
<script>
    var btn =document.getElementsByClassName ("btnlist");
    console.log(btn[0]);

    var btn1=document.getElementsByName("btn_n");
    console.log(btn1[0]);

    var btn2=document.getElementById("btn");
    console.log(btn2);

    var btn3=document.getElementsByTagName("button");
    console.log(btn3[0]);

    var btn4=document.querySelector (".btnof");
    var btn5=document.querySelector ("#btnn");
    console.log(btn4);
    console.log(btn5);
   //querySelectorAll 返回的是集合
    var btn6=document.querySelectorAll ("#btnn");
    console.log(btn6[0]);

    /*可以直接获取body*/
    console.log(document.body);
</script>
</body>
</html>

1:修改属性
语法: ele.style.syleName=styleValue
功能：设置ele元素的CSS样式
2.获取对象的属性
console.log(btn1[0].style.height); //40px
3.js获取非行内样式属性(只读）
console.log(window.getComputedStyle(btn1[0]).width);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn{
            width:50px;
        }
    </style>
</head>
<body>
<button id="btn">点我</button>
<script>
    var btn1=document.getElementsByTagName("button");
    /*修改属性     -----js操作的属性都是行内样式 (设置或者获取)*/
    btn1[0].style.background="pink";
    btn1[0].style.height="40px";
    //获取对象的属性
    console.log(btn1[0].style.height); //40px

    //js获取非行内样式属性
    console.log(window.getComputedStyle(btn1[0]).width);

</script>
</body>
</html>

innerHTML
语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容）
语法: ele.innerHTML=" html”
功能:设置ele元素开始和结束标签之间的HTML内容为html说明：
注：
不能使用”-”连字符形式font-size
使用驼峰命名形式：fontSize
className
语法: ele.className
功能:返回ele元素的class属性
注：
1.className是重新设置类，替换元素本身的class
2.如果元素有2个以上的class属性值,那么获取这个元素的className属性时,会将它的class属性值都打印出来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <style>
      .current{
            background-color:pink ;
            color:blue;
        }
        /*.on{border-bottom: 1px solid #7be052;}*/
    </style>
</head>
<body>
<div class="box" id="box">
    元素
</div>
<ul id="list">
    <li><i>前端开发</i></li>
    <li class="on"><b>java开发</b></li>
    <li>UI设计师</li>
</ul>
<script>
    //innerHTML   获取标签的内容
    var lis=document.getElementById("list").getElementsByTagName("li") ;  //数组形式
    console.log(lis);
    for(i=0,len=lis.length;i<len;i++){
        console.log(lis[i].innerHTML);
        lis[i].innerHTML =lis[i].innerHTML+‘程序‘;
        //className  返回ele元素的class属性
       lis[1].className ="current";  //className是重新设置类，替换元素本身的class
    }
     console.log(document.getElementById("box").className );
</script>
</body>
</html>

JS中DOM元素的操作
DOM属性设置与获取
获取属性(注意：这个函数获取的元素属性，而不是样式，属性是只，id,class，title等等)
语法: ele.getAttribute( “attribute” )
功能:获取ele元素的attribute属性
说明:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Dom获取属性getAttribute</title>
</head>
<body>
    <p id="text"  class="text2" align="center" data-type="title" >文本</p>
    <input type="text" name="user" id="user" value="user" vaildata="user2">
    <script>
        //获取属性 getAttribute
    var p=document.getElementById("text");  // 获取p标签的内容
        console.log(p.id);  // text
        console.log(p.align);  // center
        console.log(p.className );  // text2   //class的获取使用className
        console.log(p.getAttribute("data-type") );  //   title
        console.log(p.getAttribute("class") );  //   text2
    var input=document.getElementById("user")    ;
         console.log(input.id);  // user
         console.log(input.getAttribute ("vaildata"));  // user2

         //设置属性  setAttribute
         //给p设置一个data-color 属性
         p.setAttribute("data-color","red");
         //给p设置一个irland 属性
         input.setAttribute("irland","false");

        //删除属性 removeAttribute
        //给p删除align属性
        p.removeAttribute("align");
        //给input删除name属性
        input.removeAttribute("name");
    </script>
</body>
</html>


Dom的HTML事件HTML事件直接在HTML元素标签内添加事件,执行脚本。语法: <tag事件=“执行脚本”>功能:在HTML元素上绑定事件。说明:执行脚本可以是一个函数的调用。


1、ele是要操作的dom对象
2、attribute是要获取的html属性（如：id 、type）

设置属性
语法: ele.setAttribute(”attribute”,value)
功能:在ele元素上设置属性
说明:
1、ele是 要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
删除属性
语法: ele.removeAttribute(”attribute" )
功能:删除ele,上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML事件</title>
    <style>
        .btn{
            width:140px;
            height:30px;
            line-height: 30px;
            font-size:14px;
            text-align: center;
            background-color: #7d83ff;
            color:#fff;
            border-radius: 5px;
            margin-top:30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!--onclick:鼠标滑过时触发-->
    <input type="button " value="弹 出"  onclick=" alert(‘我是一个按钮‘)">；
    <!--onmouseover:鼠标滑过调用onmouseover函数-->   <!--onmouseout :鼠标离开时触发-->
    <div id="btn" class="btn" onmouseover="mouseoverFn(this,‘#f00‘)" onmouseout="mouseoutFn(this,‘#0f0‘)">
        开始</div>
    <div id="btn" class="btn" onmouseover="mouseoverFn(this,‘pink‘)" onmouseout="mouseoutFn(this,‘#ff0‘)">
        结束</div>
<script>
    //传参   onmouseover="mouseoverFn(this,‘#0f0‘)" 给  mouseoverFn(btn,bgColor)传参
    function mouseoverFn(btn,bgColor){
        //鼠标滑过，背景变为红色
        btn.style.background=bgColor ;
    }
    //传参   onmouseout="mouseoutFn(this,‘#0f0‘)" 给  mouseoutFn(btn,bgColor)传参
    function mouseoutFn(btn,bgColor){
        //鼠标滑过，背景变为#00f
        btn.style.background=bgColor;
    }
</script>
</body>
</html>

JS中DOM元素的操作
JS中DOM元素的操作
JS中DOM元素的操作
DOM的鼠标事件

  • onload :页面加载时触发

  • onclick :鼠标点击时触发

  • onmouseover :鼠标滑过时触发

  • onmouseout :鼠标离开时触发

  • onfocus :获得焦点时触发 ,事件用于：
    input标签type为text、password; textarea;

  • onblur :失去焦点时触发

  • onchange：域的内容改变时发生，一般作用于select或checkbox或radio

  • onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。

  • onmousedown : 鼠标按钮在元素上按下时触发.

  • onmousemove :在鼠标指针移动时发生

  • onmouseup :在元素上松开鼠标按钮时触发

关于this指向
在事件触发的函数中, this是对该DOM对象的引用。
键盘事件

    • onkeydown(键盘按下)

    • onkeyup(键盘抬起)

    • onkeypress(按键事件)

      document.body.onkeypress = function () {
        var e = window.event;
        console.log(e.keyCode);

//鼠标移动时，body的位置
document.body.onmousemove = function (e) {
  var pageX = e.pageX || e.clientX;
      var pageY = e.pageY || e.clientY;
       console.log(pageX,pageY);
    }

      表单事件

      • onfocus(获得焦点)

      • onblur（失去焦点）

      浏览器事件
      window事件 ：

      • onload（加载完成事件）
      • onerror（报错事件）
      • onresize :当调整浏览器窗口的大小时触发
      • onscroll :(滑动事件)拖动滚动条滚动时触发

      触屏事件
      touch（触屏）
      touchstart （开始触屏 ）
      touchmove（触屏移动）
      touchend(触屏结束)

      如何给dom元素添加事件**
      1.常规添加 直接在标签上添加事件

    • <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="btn1(1)" >按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3" class="btn_3">按钮3</button>
<br/>
<br/>
<div style="background: pink; width:40px; height:40px;"  id="black"></div>
<script>
   /*  如何给dom元素添加事件
  1.常规添加  直接在标签上添加事件
 */
    function btn1(a){
        console.log(a);
    }
    /*2.动态给dom添加事件*/
    var btn =document.getElementById ("btn2");
   btn.onmouseover=function(){
     btn.style.background ="red";
   };
   btn.onmouseout=function(){
       btn.style.background =" buttonface";
   };
  btn.onclick =showbtn; //不能加小括号
    function showbtn(){
        console.log(2);
    }
   /*var btn3 =document.getElementsByClassName("btn_3");
   btn3[0].onclick=function(){
       console.log(3);
   }*/

    //事件的监听
   //匿名函数
  /* var btn3=document.getElementById ("btn3");
    btn3.addEventListener("click",function (){
        console.log(3);
    });*/
   //自定义函数
   btn3.addEventListener("click",minibtn);
           function minibtn(){
       console.log(3);
   }
   var squ =document.getElementById ("black");

</script>
</body>
</html>

      **事件的执行参数 **
      执行参数可以写在函数的形参 也可以直接window.event
      this指代当前事件的执行对象
      target srcElement 当前点击的目标元素

    • **事件的执行参数 **
      执行参数可以写在函数的形参 也可以直接window.event
      this指代当前事件的执行对象
      target srcElement 当前点击的目标元素

      var btn = document.getElementById("btn");
    btn.onclick = function (e) {
 var target = e.target || e.srcElement;
        console.log(target);//目标元素
        }

    • 元素的横坐标：e.pageX || e.clientX;
      元素的纵坐标：e.pageY || e.clientY;

      // 获取鼠标移动是Body的坐标

      document.body.onmousemove = function (e) {
   var pageX = e.pageX || e.clientX;
    var pageY = e.pageY || e.clientY;
       console.log(pageX,pageY);
    }
      • 1
      • 2
      • 3
      • 4
      • 5

      js里面的this

      1. this–可以指代当前事件的执行对象
      2. .this–函数里面的this对象指代当前的window对象
      showname();
    function showname() {
        console.log(this);
    }

    • Js事件的冒泡：给子元素和父元素添加同样的事件，会发生事件冒泡
      处理方法：给子元素添加（开发中常用）
      法1：e.stopPropagation ();//阻止事件冒泡；用于JS
      法2：e.preventDefault ();//阻止默认事件；
      法3： return false;//阻止冒泡，用于JQ;
      事件的委托
      target:事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

      var meunul=document.getElementById("menu");
  meunul.onclick=function(b){
      var target= b.target|| b.srcElement ; 
//      console.log(target.nodeName); //LI
      if(target.nodeName.toLowerCase() =="li"){
          console.log(521);
          console.log(521);
          console.log(521);
      }
  }
    • <div class="min">
     <button id="bbtn">按钮</button>
 </div>
<script>
 var minidiv=document.getElementsByClassName("min")[0];
    var btun=document.getElementById ("bbtn");
    var tempr=0;
  btun.onclick=function(e) {
      tempr++;
      console.log(tempr);
      e.stopPropagation ();//阻止事件冒泡；用于JS
      //  e.preventDefault ();//阻止默认事件；
      //return false;//阻止冒泡，用于jq;
  }
    minidiv.onclick=function(){
        tempr++;
        console.log(tempr);
    }

    • 写这个表示一下520的到来吧

      <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
     .biu{
         width:130px;
         height:140px;
         background: rgba(255, 214, 207, 0.76);
         text-align: center;
         line-height: 140px;
      }
        .superise{
            background: #96ffe9;
        }
        .min{
            width:100px;
            height:50px;
            border:1px solid silver;
            text-align: center;
        }
       #menu{
           width:300px;
           height:50px;
           border:1px solid pink;
           text-align: center;
           margin:0;
           padding:0;
        }
     #menu li{
         list-style: none;
         width:100px;
         float:left;
         text-align: center;
         background: yellow;
         line-height: 50px;
     }
     #menu>li:hover{
            background: pink;
        }
    </style>
</head>
<body>
<button id="btn">点我一下</button>
<button id="btn1">点我一下</button>
<br/>
<br/>
<br/>
<br/>
<div class="biu">
    <button class="superise">有惊喜哟</button>
</div>

<br/>
<br/>
 <div class="min">
     <button id="bbtn">按钮</button>
 </div>
<br/>
<br/>
<br/>
<ul id="menu">
    <li>5</li>
    <li>2</li>
    <li>1</li>
</ul>
<script>
  var buton=document.getElementById ("btn");
  buton.onclick=function(){
      alert ("今天要开心哦");
//      document.write("520快乐");

  }
  var buton1=document.getElementById ("btn1");
  buton1.onclick =function(e){
//      *target  srcElement  当前点击的目标元素
      var tag= e.target || e.srcElement;
      console.log(tag);
  }

    document.body.onkeypress =function(m){
        console.log(m.keyCode);
    }
  document.body.onmousemove =function(f){
//       var pageX = f.pageX||f.clientX;
//       var pageY = f.pageY||f.clientY;
//      console.log(pageX, pageY);
  }
  var biubiu=document.getElementsByClassName ("biu")[0];
  var super_rise=document.getElementsByClassName ("superise")[0];
    super_rise.onclick =function(){
        document.write ("520快乐");
    }

    //Js事件的冒泡及处理(开发中常用)
    var minidiv=document.getElementsByClassName("min")[0];
    var btun=document.getElementById ("bbtn");
    var tempr=0;
  btun.onclick=function(e) {
      tempr++;
      console.log(tempr);
      e.stopPropagation ();//阻止事件冒泡；用于JS
      //  e.preventDefault ();//阻止默认事件；
      //return false;//阻止冒泡，用于jq;
  }
    minidiv.onclick=function(){
        tempr++;
        console.log(tempr);

    }

    // 事件的委托
   var meunul=document.getElementById("menu");
  meunul.onclick=function(b){
      var target= b.target|| b.srcElement ; //target:事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
//      console.log(target.nodeName); //LI
      if(target.nodeName.toLowerCase() =="li"){
          console.log(521);
          console.log(521);
          console.log(521);
      }
  }
</script>
</body>
</html>

    • JS中DOM元素的操作

    • JS中DOM元素的操作

    • 文章来源于：https://blog.csdn.net/fanfan_h/article/details/90449134

dom log js dom对象

luvhl

luvhl

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

JS事件、Bom对象和Dom对象（1）（乐字节架构）

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！事件 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

liaoxuewu 2020-06-26

JS HTML DOM

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、Ja

北京老苏 2020-06-25

【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

你需要先找到他的父元素。<p id="p1">这是一个段落。我想说，这用CSS标签选择器不好吗？但是这操作跟数组没有区别啊。。。只不过Java的数组要求长度是固定且数据类型一致的。NodeList对象是一个从文档中获取的节点

Lophole 2020-06-14

【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

document.write() 可用于直接向 HTML 输出流写内容。【绝对不要在文档加载完成之后使用 document.write()。修改 HTML 内容的最简单的方法是使用 innerHTML 属性。<p>以上段落通过脚本修改。DOM对

SIMONDOMAIN 2020-06-14

详解用js代码触发dom事件的实现方案

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseu

firstboy0 2020-06-14

React：虚拟DOM和diff算法

目的：为了实现页面元素的高效更新。

hyMiss 2020-07-27

一篇文章教会你如何将DOM转换为virtual DOM

Virtual DOM是虚拟节点，它通过Javascript的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM节点。浏览器在处理DOM时，总会附加很多属性，这会使得每一次数据更新，渲染很慢。Virtual　DOM利用

liaoxuewu 2020-07-08

DOM

当网页被加载时，浏览器会创建页面的文档对象模型。<p>以上段落通过脚本修改。<p>弹窗-提示浏览器 cookie 是否可用。onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时，会调用 upperCase(

luvhl 2020-06-13

dom对象的属性和方法--乐字节java

<font color="red">DOM</font>：Document Object Model 文档对象模型。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节

SIMONDOMAIN 2020-05-31

Python学习第82天（JavaScript的DOM对象）

　　到了JavaScript中最重要的部分，DOM对象，基本就是怎么找到对应的标签，然后给他加上各种酷炫的效果。　　　　1.什么是 DOM？　　　　　　DOM 是 W3C的标准。　　　　　　"W3C 文档对象模型是中立于平台和语言的接口，它允许程

hyMiss 2020-05-19

如何理解DOM

首先DOM全称为,是针对HTML和XML的API。可以理解为DOM就是一系列功能集合。从一下几个方面理解。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容，第二阶段涉及浏览器执行渲染。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。DOM的

liaoxuewu 2020-05-19

Vue 通过ref获取DOM元素

ref 被用来给元素或子组件注册引用信息。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：。-- `vm.$refs.p` will be the DOM node -->. -- `vm.$re

书虫媛 2020-05-15

5.11 dom的选择器

# 一、DOM## 0. js的三大组成部分的关系- ECMAScript规定，如何在BOM中操作DOM## 1. 介绍1. DOM文档对象模型，对象：document - DOM不属于BOM - window对象身上有提供document对象 - DOM

liaoxuewu 2020-05-11

3.jQuery操作DOM对象的方法

$.nextUntil.prop;//找到同级的下面的元素，直到h1元素为止，且只找到里面input[type="checkbox"]的元素。-11.closest()获得匹配选择器的第一个祖先元素，从自己开始沿DOM树向上。$.aft

liaoxuewu 2020-05-10

jQuery对DOM节点进行操作(删除节点)

　　remove()：用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。该方法的返回值时一个指向已被删除的节点的引用，以后也可以继续使用这些元素。　　detach()：和remove()方法一样，也是删除DOM中匹配的元素，

小仙儿 2020-05-09

JavaScript html Dom文档对象模型

　　当网页被加载时，浏览器会创建页面的文档对象模型。

SIMONDOMAIN 2020-05-09

认识 DOM

DOM可以把 HTML 看作是文档树。通过 DOM 提供的 API 可以对树上的节点进行操作。DOM 中的 "O" 是 Object (对象)。DOM 中的 "M" 是 Model (模型)。　　当把页面加载到浏览器

hyMiss 2020-05-01

JavaScript技巧——变量Dom对象的所有属性

　　每一个attribute属性有一个附加属性specified，当属性是HTML Element的属性，或者是通过setAttribute方法进行的添加的时候，它的值为 true。

liaoxuewu 2020-04-29

将你的 Virtual dom 渲染成 Canvas

一个基于 vue 的 virtual dom 插件库，按照Vue render 函数的写法，直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定。这些信息是需要从接口取的，而且每个人都不一样。第一次碰到这

星星有所不知 2020-10-12

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28
luvhl

luvhl

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号