dom元素操作獲取等

一隻愛吃魚的驢發表於2020-12-10

一、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>

在這裡插入圖片描述

DOM屬性設定與獲取

獲取屬性
語法: ele.getAttribute( “attribute” )
功能:獲取ele元素的attribute屬性
說明:
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>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元素上繫結事件。
說明:執行指令碼可以是一個函式的呼叫。

<!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>

在這裡插入圖片描述

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 當前點選的目標元素

  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);
    }

js裡面的this

this–可以指代當前事件的執行物件
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>

在這裡插入圖片描述

獲取或操作DOM元素特性的幾種方式
2018-11-29
jQuery捕獲-獲取DOM元素內容和屬性
2020-09-01
jQuery
原生javascript獲取dom元素簡單介紹
2017-03-29
JavaScript
JavaScript獲取HTML DOM節點元素詳解(轉)
2013-07-17
JavaScriptHTML
Java ArrayList 查詢、刪除指定元素；排序；遍歷；隨機獲取元素等常用操作
2020-10-31
Java排序隨機
[譯] 使用 closest() 函式獲取正確的 DOM 元素
2019-04-30
函式
js獲取頁面dom元素的幾種常用方式
2017-03-20
JS
vue+axio通過獲取dom元素上傳檔案
2019-04-25
Vue
vue1和vue2獲取dom元素的方法
2018-03-25
Vue
【面試必備】javascript操作DOM元素
2013-12-27
面試JavaScript
js獲取操作iframe子頁面中元素
2017-03-22
JS
關於動態建立的DOM元素獲取不到的問題。
2017-12-19
js獲取元素的方法（獲取html元素的方法）
2017-07-12
JSHTML
iframe的操作-Js/Jquery獲取iframe中的元素
2018-04-03
JSjQuery
獲取React元件的DOM
2019-05-06
React元件
style方式獲取元素的border和background等符合屬性
2017-03-29
動態生成DOM元素的高度及行數獲取與計算方法
2019-02-16
使用jquery操作元素的css樣式（獲取、修改等等）
2017-10-14
jQueryCSS
JS 獲取文件元素
2019-08-16
JS
jquery獲取子元素
2017-10-16
jQuery
jQuery獲取元素前面所有兄弟元素
2017-03-08
jQuery
javascript DOM元素節點操作簡單介紹
2017-04-14
JavaScript
JavaScript獲取指定元素的同輩元素
2017-03-29
JavaScript
獲取ul元素下的所有li元素
2017-04-08
JavaScript獲取父元素下子元素節點
2018-07-06
JavaScript
Vue入門指南-08 Vue中的標籤/如何獲取DOM元素(快速上手vue)
2019-04-01
Vue
獲取DOM元素到頁面頂部的距離，親測有效版本（轉載）
2018-12-29
jquery獲取元素節點
2019-02-15
jQuery
jQuery獲取所有兄弟元素
2017-03-08
jQuery
javascript中獲取元素尺寸
2016-12-08
JavaScript
JavaScript獲取同級元素
2017-12-04
JavaScript
JavaScript 獲取同級元素
2017-12-04
JavaScript
created mounted 動態獲取資料渲染後，獲取DOM問題
2018-07-19
請教下在影片播放頁面 - 不會操作獲取元素進行點選操作
2024-04-12
獲取div元素下li元素的數目
2017-03-24
jQuery如何獲取當前元素的兄弟元素
2017-02-28
jQuery
jQuery獲取li元素後面所有兄弟元素
2017-11-25
jQuery
『與善仁』Appium基礎 — 22、獲取元素資訊的操作（一）
2021-12-11
APP

dom元素操作獲取等

一、DOM元素的獲取

innerHTML

className

DOM屬性設定與獲取

DOM的滑鼠事件

表單事件

瀏覽器事件

觸屏事件

js裡面的this

Js事件的冒泡：給子元素和父元素新增同樣的事件，會發生事件冒泡

事件的委託

相關文章