Dow事件

時間 2019-11-12

標籤 dow 事件简体版

原文原文鏈接

  《棟卻門得。給 哎裏們 拜》對象獲取元素根據。。id 經過ID獲取元素 

  DOM查找方法 

  document.getElementById() 

  document.getElementsByTagName() 

 
 語法：document.getElementById(「id」) 

  功能：返回對擁有指定ID 的第一個對象的引用 

  返回值：DOM對象說明：id爲DOM元素上id屬性的值 

  <div class="box" id="box">元素1</div> 

  <script> 

  var box=document.getElementById("box"); // 獲取id爲box的這個元素 

  console.log(box); //返回的是box的div自己 

  </script> 

  id只能有一個，返回的是整個div自己 

 
 語法：document.getElementsByTagName(「tag」) 

  功能：返回一個對全部tag標籤引用的集合 

  返回值：數組 

  說明：tag爲要獲取的標籤名稱 

  分析：經過標籤名選取的元素是一個類數組對象，若是你要獲取到特定的元素，那麼就要像數組同樣，下標從0開始算起，找到這個元素，好比：要找第三個li，就是4. 

  tag能夠是頁面中全部的a，l 
 i標籤等 //輸出5,而且輸出全部的li以數組的形式 

  返回是，數組，而且有數量屬性 

  獲取到list1下的全部的li //輸出3,而且輸出全部li以數組的形式 

  <ul id="list1"> 

  <li>前端開發</li> 

  <li>服務器端開發</li> 

  <li>UI設計</li> 

  </ul> 

  <ol> 

  <li>javaScript原生</li> 

  <li>javaScript框架</li> 

  </ol> 

  <script> 

  var lis=document.getElementsByTagName("li"); // 獲取頁面中全部的li和數量 

  console.log(lis.length); 

  var lis2=document.getElementById("list1").getElementsByTagName("li"); 

  // 獲取id爲list1下的全部的li和數量 

  console.log(lis2.length); 

  </script> 

  設置動態樣式: 

 
 語法：ele.style.styleName=styleValue 

  功能：設置ele元素的CSS樣式說明：一、ele爲要設置樣式的DOM對象 

  二、styleName爲要設置的樣式名稱 

  三、styleValue爲設置的樣式值 

 
 屬性不能用-形式，只能用駝峯形式。若是font-weight改成fontWeight 

  <div class="box" id="box"> 元素1 </div> 

  <script> 

  // 設置id爲box的這個元素的文字顏色,屬性是減號鏈接的複合形式時 

  // 必須要轉換爲駝峯形式 

  var box=document.getElementById("box"); 

  box.style.color='#f00'; 

  box.style.fontWeight="bold"; 

  </script> 

 
 設置元素樣式是必需要Dom對象document 

 
 由於getElementsByTagName()取出來的是數組是須要遍歷每個元素，取出每個元素 

  可讓他們的顏色都不同 

  <ul id="list"> 

  <li>前端開發</li> 

  <li>服務器端開發</li> 

  <li>UI設計</li> 

  <li>UI設計</li> 

  <li>UI設計</li> 

  </ul> 

  <script> 

  var lis=document.getElementById("list").getElementsByTagName("li"); 

  for(var i=0,len=lis.length;i<len;i++){ // 遍歷每個li 

  lis[i].style.color='#00f'; 

  if(i==0){ 

  lis[i].style.backgroundColor="#ccc"; 

  }else if(i==1){ 

  lis[i].style.backgroundColor="#666"; 

  }else if(i==2){ 

  lis[i].style.backgroundColor="#999"; 

  }else{ 

  lis[i].style.backgroundColor="#333"; 

}

}

  </script> 

  以後的li繼續着樣式下去。 

  選取DOM元素的方法 

方法	語法	說明
經過ID	getElementById()	返回帶有指定ID的元素
經過標籤名	getElementsByTagName()	返回帶有指定標籤名的全部元素，返回的是一個類數組對象
經過name屬性	getElementsByName()	返回指定name屬性值的全部子元素的集合，返回的是一個類數組對象
經過CSS類	getElementsByClassName()	返回指定class名稱的元素

  《音吶html》 
 是一個範圍 

  innerHTML 

 
 語法：ele.innerHTML 

 
 無等號=是獲取開始到結束標籤之間的文本和HTML內容，標籤內容, 

  功能：返回ele元素開始和結束標籤之間的HTML 

 
 語法：ele.innerHTML=」html 」 

 
 有等號=則用來設置的，加上內容或者設置成爲html，lis[i].innerHTML+="程序"； 

  功能：設置ele元素開始和結束標籤之間的HTML內容爲html 

  for 
 返回出li裏面的全部內容 

  <head> 

  <style> 

  .on{border-bottom:1px solid #0f0;} 

  .current{background:#ccc;color:#f00;} 

  </style> 

  </head> 

  <body> 

  <div class="box" id="box">元素1</div> 

  <ul id="list"> 

  <li><i>前端開發</i></li> 

  <li class="on"><b>服務器端開發</b></li> 

  <li>UI設計</li> 

  </ul> 

  <script> 

  var lis=document.getElementById("list").getElementsByTagName("li"); 

  for(var i=0,len=lis.length;i<len;i++){ 

  console.log(lis[i].innerHTML); //無獲取html 裏的內容 

  lis[i].innerHTML+='程序'; //有=設置成爲html內容 

 
  lis[1].className="current"; //與上樣式，來設置html樣式 

}

  console.log(document.getElementById("box").className); 

  // 
 若是元素有兩個以上的class屬性值，那麼獲取這個元素的className屬性是，會將它的class屬性值都打印出來 //輸出box,打印出class的屬性，打印出類名。 

  </script> 

  </body> 

  上面代碼設置好current的樣式，而後設置給第2個li， 
 動態的js替換掉以前的class。  

  給一類元素添加class屬性的， 
 無等=是獲取class屬性，有等號=是設置 

  className 

 
 語法：ele.className 

 
 功能：返回ele元素的class屬性 

 
 語法：ele.className=」cls」 

 
 功能：設置ele元素的class屬性爲cls 

 
 <body> 

 
 <div class="news"> 

 
 <p class="new1">新聞標題1</p> 

 
 <p class="new2">新聞標題2</p> 

 
 <p class="new1">新聞標題3</p> 

 
 </div> 

 
 <script> 

var

 
 div=document.getElementsByClassName("news")[0]; 

 
 var new1=div.getElementsByClassName("new1"); 

 
 var new2=div.getElementsByClassName("new2"); 

 
 console.log(div); 

 
 console.log(new1); 

 
 console.log(new2); 

 
 </script> 

 
 </body> 

 
 輸出結果：輸出的是body的內容，還有[p,new1,p.new2],[p.new2] 

  分析： 

  經過CSS類選取到的元素也是一個類數組對象，也要像數組同樣，下標從0開始 

  算起，找到數組中的某個元素。 

  本例中，經過getElementsByClassName("news")[0];獲取到了第一個div，他的子元素P標籤是在它的基礎上再經過類選擇器獲取元素的 

  若是不加下標直接寫var div=document.getElementsByClassName("news");的話，那麼咱們獲 

  取到的是一個‘類名爲news’的數組，這時控制檯會提示：錯誤 

  也就是這個div是CSS‘類名爲news’的數組，並非p標籤的父元素 

 
 獲取HTML屬性。 

  A直接獲取法 
 可是隻能獲得它有的標籤屬性，class之外 分割號除外，自定義標籤除外。返回的是undefined未定義的，或者報錯null。如Dom對象.屬性（p.id) //返回text 

  《給的額去備t》 

 
 B語法：ele.getAttribute(「attribute」) 

  功能：獲取ele元素的attribute屬性 

  說明：一、ele是要操做的dom對象 

  二、attribute是要獲取的html屬性（如：id，type） 

  <style> 

  .on{border-bottom:1px solid #0f0;} 

  .current{background:#ccc;color:#f00;} 

  </style> 

  <body> 

  <p id="text" class="text" align="center" data-type="title">文本</p> 

  <input type="text" name="user" value="user" id="user" validate="true"> 

  <script> 

  var p=document.getElementById("text"); 

  var user=document.getElementById("user"); // null 

 
  console.log(p.getAttribute("class")); //p.className //獲取返回text 

 
  console.log(user.getAttribute("validate")); //返回true 

 
  p.setAttribute("data-color","red"); // 給p設置一個data-color的屬性 

 
  user.setAttribute("isRead","false"); // 給input設置一個isRead的屬性 

 
  p.removeAttribute("align"); // 刪除p上的align屬性 

  </script> 

  </body> 

 
 設置屬性 

 
 語法：ele.setAttribute(「attribute」,value) 

  功能：在ele元素上設置屬性 

  說明：一、ele是要操做的dom對象 //1setAttribute方法必需要有兩個參數 

  二、attribute爲要設置的屬性名稱 //若是value是字符串，需加引導 

  三、value爲設置的attribute屬性的值 //setAttribute()有兼容性問題 

 
 刪除屬性： 

 
 語法：ele.removeAttribute(「attribute」) 

  功能：刪除ele上的attribute屬性 

  說明：一、ele是要操做的dom對象 

  二、attribute是要刪除的屬性名稱 

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。