亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

經(jīng)過這幾章節(jié)學到的DOM對元素獲取操作總結和案例

Original 2019-01-04 15:53:28 342
abstrakt：經(jīng)過本章節(jié)學習了DOM方法獲取元素分別為：1、根據(jù)id屬性獲取元素，        1.1 document根據(jù)id獲取元素用.getElementById('ID')方法；返回獲取到對應ID的元素數(shù)組對象。【注意】：運用ID選擇器中不可像使用類名那樣重復別名，CSS樣式?jīng)]問題。但DOM中 .getElementById('

經(jīng)過本章節(jié)學習了DOM方法獲取元素分別為：

1、根據(jù)id屬性獲取元素，

    

    1.1 document根據(jù)id獲取元素用.getElementById('ID')方法；返回獲取到對應ID的元素數(shù)組對象。


【注意】：運用ID選擇器中不可像使用類名那樣重復別名，CSS樣式?jīng)]問題。但DOM中 .getElementById('ID')方法只能找到一個。

    1.2 對所獲取的數(shù)組對象操作方法：

document.getElementById('ID').style.……


2、根據(jù)name屬性獲取元素；

     2.1：使多name為表單中元素和圖片，內聯(lián)框架。

     2.2：name屬性更多的用于表單數(shù)據(jù)提交到服務器時,用來識別提交的內容，可以在客戶端先對name作基礎驗證再提交。

    2.3:document.getElementsByName('username')方法返回所有name為 username的元素對象數(shù)組；

    2.4：對所獲取的對象后面加上 [下標]對應的元素進行操作。

document.getElementsByName('login')[下標].style......


3、根據(jù)標簽名稱獲取元素；

    3.1：頁面中根據(jù)標簽名稱獲取用:document.getElementsByTagName('div') ，此方法返回所有div標簽集合。

  3.2 對所獲取到的標簽集合使用方法：

document.getElementsByTagName('div') [下標].style......

document.getElementsByTagName('div') .item(0).style......


4、根據(jù)class屬性來獲取元素，

       4.1  document.getElementsByClassName（'classname'）對頁面中獲取到所有classname類的html標簽元素，返回元素集合對象數(shù)組。

       4.2 還可以對父類集合數(shù)組中再獲取子級類

document.getElementsByClassName（'父類名'）[下標].getElementsByClassName('子類名').item(下標);


       4.3 getElementsByClassName使用方法：

document.getElementsByTagName('div')[下標].style................

document.getElementsByTagName('div').item(下標).style................


5、getElement其它方法：

5.1

根據(jù) css選擇器來獲取元素，

document.querySelectorAll（'ul')//獲取所有ul，將返回數(shù)象數(shù)組。用下標訪問對應的元素

document.querySelector('.classname')//獲取所有classname,將返回對象數(shù)組。用下標訪問對應的元素

document.querySelector('#idName')//收于id別名要求要不能一致，就算有id別名重復也只返第一個id，

         //需要使用時后面加下標[0]即可。


5.2根據(jù)類名和name屬性快捷獲取元素

   圖片

document.images[下標]，document.images['name屬性']，document.images.name屬性；

表單

document.forms[下標]，document.forms.item[下標],document.forms['name值']，document.forms.name值.


鏈接

document.links[下標], document.links[name值], document.links.name值；


body

document.dody.style.......因為body只有一個不需要下標操作;


head

document.head.appendChild.....


document.documentElement整個html窗口。


document.doctype 文檔類型。


更多未提到的后續(xù)把手冊都看一遍或者會去查。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .clear{ clear:both} 
 ul{width: 200px;height: 150px;border:1px solid #ccc;float: left;margin-left: 20px;}
 .ulroot span{margin-left: 100px;}
 .ulroot{float: left;margin-left:10px;}
 .formDiv{margin-top: 10px;border:1px solid #ccc;}
 </style>
</head>
<body>
 <ul id="styleUl0">
 <li id="style1_1">我的ID是style1_1</li>
 <li id="style1_2">我的ID是style1_2</li>
 <li id="style1_3">我的ID是style1_3</li>
 <li id="style1_4">我的ID是style1_4</li>
 <li id="style1_5">我的ID是style1_5</li>
 </ul>
 <ul id = "stylesetClassUl">
 <li id="style2_1">我的ID是style2_1</li>
 <li id="style2_2">我的ID是style2_2</li>
 <li id="style2_3">我的ID是style2_3</li>
 <li id="style2_4">我的ID是style2_4</li>
 <li id="style2_5">我的ID是style2_5</li>
 </ul>

 <ul id="styleUl2">
 <li id="style3_1">我的ID是style3_1</li>
 <li id="style3_2">我的ID是style3_2</li>
 <li id="style3_3">我的ID是style3_3</li>
 <li id="style3_4">我的ID是style3_4</li>
 <li id="style3_5">我的ID是style3_5</li>
 </ul>

 <div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
 <h3>對元素id操作</h3>
 <div> 
 <span>用id改變ul背景</span><button onclick="resetUl(0)">確定</button><br><br>
 <span>用id改變li背景</span><button onclick="resetli(0)">確定</button> 
 </div>


 <div>
 <span>用id改變ul背景</span><button onclick="resetUl(1)">確定</button><br><br>
 <span>用id改變ul背景</span><button onclick="resetli(1)">確定</button>

 </div>



 <div>
 <span>用id改變li背景</span><button onclick="resetUl(2)">確定</button><br><br>
 <span>用id改變li背景</span><button onclick="resetli(2)">確定</button> 
 </div>

 </div>
 <div></div>
<!-- 根據(jù)name操作元素  -->
 <div>
 <h3>對元素name操作</h3>
 <form action="" style="width:600px;float:left">
  <input type="text" name="username"> 我的name是username<br>
   <input type="password" name="password"> 我的name是password<br>
     <button name="button">提交</button>我的name是button  <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
 </form>

 <div  style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
 對name為password變色<br>
  <button onclick="passSet()">一個name操作</button><br>
 對name為username 變色操作<br>
 <button onclick="userNameSet()">多個name操作</button> 
 </div>
 <div></div>
 </div>


 <div>
 <h3>DOM對標簽名操作</h3>
 <form action="" style="width:600px;float:left">
  <input type="text" name="username"> 我的name是username<br>
   <input type="password" name="password"> 我的name是password<br>
     <button name="button">提交</button>我的name是button  <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
     <input type="text" name="username">我的name跟前面哥們一樣username <br>
 </form>

 <div  style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
 對標簽為form變色
  <button  onclick="tagSet('form')">form操作</button><br> 
 對標簽為input變色
  <button  onclick="tagSet('input')">input操作</button><br>
  對標簽為button變色
  <button  onclick="tagSet('button')">button操作</button><br>
  對標簽為span變色
  <button  onclick="tagSet('span')">span操作</button><br>
   對標簽為body變色
  <button onclick="tagSet('body')">body操作</button><br> 
 </div>
 <div></div>
 </div>

 <ul>
 <li>我的class是style1_1</li>
 <li id="style1_2">我的ID是style1_2</li>
 <li>我的class是style1_1</li>
 <li id="style1_4">我的ID是style1_4</li>
 <li>我的class是style1_1</li>
 </ul>
 <ul>
 <li id="style2_1">我的ID是style2_1</li>
 <li>我的class是style2_1</li>
 <li id="style2_3">我的ID是style2_3</li>
 <li>我的class是style2_1</li>
 <li id="style2_5">我的ID是style2_5</li>
 </ul>

 <ul>
 <li>我的class是style3_1</li>
 <li>我的class是style3_1</li>
 <li>我的class是style3_1</li>
 <li>我的class是style3_1</li>
 <li>我的class是style3_1</li>
 </ul>

 <div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
 <h3>對標簽Class操作</h3>
 <div> 
 <span>用class改變setClassUl背景</span><button onclick="setUlClass(0)">確定</button><br><br>
 <span>用class改變li背景</span><button onclick="setLiClass(0)">確定</button> 
 </div>


 <div>
 <span>用class改變ul2背景</span><button onclick="setUlClass(1)">確定</button><br><br>
 <span>用class改變li背景</span><button onclick="setLiClass(1)">確定</button>

 </div>



 <div>
 <span>用class改變所有ul背景</span><button onclick="setUlClass(2)">確定</button><br><br>
 <span>用class改變li背景</span><button onclick="setLiClass(2)">確定</button> 
 </div>

 </div>
 <div></div>


 <script type="text/javascript"> 

 // 改變ul背景
 function resetUl(pId) { 
 //使用id獲取ul元素
 let styleUl0 = document.getElementById('styleUl0');
 let stylesetClassUl = document.getElementById('stylesetClassUl');
 let styleUl2 = document.getElementById('styleUl2'); 
 switch(pId)
 {
 case 0:
  styleUl0.style.backgroundColor = 'coral';
   break;

 case 1:
 stylesetClassUl.style.backgroundColor = 'red'; 
  break;

 case 2:
  styleUl2.style.backgroundColor = 'yellow';
  break;
 } 
 }

 // 改變li背景
 function resetli(pId) { 

 //使用id獲取li元素
 let style1_1 = document.getElementById('style1_1');
 let style1_2 = document.getElementById('style1_2');
 let style1_3 = document.getElementById('style1_3');
 let style1_4 = document.getElementById('style1_4');
 let style1_5 = document.getElementById('style1_5');

 let style2_1 = document.getElementById('style2_1');
 let style2_2 = document.getElementById('style2_2');
 let style2_3 = document.getElementById('style2_3');
 let style2_4 = document.getElementById('style2_4');
 let style2_5 = document.getElementById('style2_5');

 let style3_1 = document.getElementById('style3_1');
 let style3_2 = document.getElementById('style3_2');
 let style3_3 = document.getElementById('style3_3');
 let style3_4 = document.getElementById('style3_4');
 let style3_5 = document.getElementById('style3_5');

 switch(pId)
 {
 case 0:
 getElements('style1_1','style1_3','style1_4'); 
   break;
 case 1:
  getElements('style2_1','style2_2','style2_5'); 
  break;
 case 2: 
   getElements('style3_3','style3_1','style3_2'); 
  break;
 } 
 }

 //用止函數(shù)可以對多個id獲取元素
 function getElements(){
 //創(chuàng)建一個空的對象來保存結果
 let elements = {};
 //arguments.length表示函數(shù)參數(shù)個數(shù)

 for(let i=0;i<arguments.length;i++){

 let id = arguments[i];

 let elt = document.getElementById(id);

 if(elt ===null){
 throw new Error("No element with id:"+id);
 } 
 elements[id]=elt; 
 }
  for(let key in elements){
 elements[key].style.backgroundColor ='#ccc'   
  }
 }

// **************************對name操作部分**************************************************
 // 對name為password的操作
 function passSet(){
 let pass = document.getElementsByName('password')[0];
 pass.style.backgroundColor = 'yellow';
 }
 //對name為username的元素操作
 function userNameSet(){
 let username = document.getElementsByName('username');
 for (var i = username.length - 1; i >= 0; i--) {
 username[i].style.backgroundColor = 'yellow';
 }

 }
// ****************************對標簽操作部分**************************************************
 function tagSet(tagname){
 let tag=document.getElementsByTagName(tagname)
 let tagLeng=tag.length;

 for (var i = tagLeng - 1; i >= 0; i--) {
 switch(tagname){ 
 case 'form':  
 tag[i].style.backgroundColor = '#B452CD' 
 break;
 case 'input': 
 tag[i].style.backgroundColor = '#A6A6A6'
  break;
 case 'button': 
 tag.item(i).style.backgroundColor = '#9932CC'
  break;
 case 'span': 
 tag[i].style.backgroundColor = '#76EE00'
  break;
 case 'body': 
 tag[i].style.backgroundColor = '#0000EE'
  break;
 }
 }

 }

// *******************************對類名操作部分************************************************
 let setClassUl = document.getElementsByClassName('ulClass'); 

 function setUlClass(classid){

 switch(classid){
 case 0: 
  setClassUl[0].style.backgroundColor = 'red';
 break;
 case 1:
 setClassUl.item(1).style.backgroundColor = 'blue';
  break;
 case 2: 
 for (var i = setClassUl.length - 1; i >= 0; i--) {
 setClassUl[i].style.backgroundColor = '#ff6700'
 }
 break;
 }
 }

 function setLiClass(classid){
 let list1=setClassUl[0].getElementsByClassName('style1_1');
 let list2=setClassUl[1].getElementsByClassName('style2_1');

 let list3 = document.getElementsByClassName('style3_1');

 switch(classid){
 case 0:  
 for (var i = list1.length - 1; i >= 0; i--) {
 list1[i].style.backgroundColor = '#ccc'
 }break; 
 case 1: 
 for (var i = list2.length - 1; i >= 0; i--) {
 list2[i].style.backgroundColor ='#668B8B';
 }break;
 case 2: 
 for (var i = list3.length - 1; i >= 0; i--) {
 list3[i].style.backgroundColor = '#7FFF00';
 }

 break;
 } 
 }

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

20190104154841.png

Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-01-04 16:03:50
Zusammenfassung des Lehrers：作業(yè)完成的相當?shù)木? 對于選擇器的總結也非常的到位, 看來是用心了, js中的幾個重要的dom元素, 例如 document對象,它上面的常用屬性和方法, 非常多,更多內容,可以參考mdn網(wǎng)站

Versionshinweise

Beliebte Eintr?ge