獲取元素方法與陣列

阿新 • • 發佈：2019-01-02

獲取元素方法：

(1), 通過js的dom方法:getElementById() :根據元素的id獲取元素
(2),通過getElementsByClassName():根據元素的class獲取頁面元素;
(3),通過getElementsByTagName(): 根據元素標籤的名稱獲取頁面元素;


<html>
    <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
//通過getElementById();
window.onload=function(){
var div=document.getElementById('id2');
div.style.width='300px';
div.style.height=300+'px';
div.style.borderRadius=150+'px';
div.style.background='pink';
div.style.margin='auto';
div.style.color='purple';
div.innerText='待我半生戎馬，許你浪跡天涯';
div.innerText='<br/>'
div.innerText='待我了無牽掛，許你花前月下';
div.style.textAlign='center';div.style.lineHeight=300+'px';
var divContent=div.innerText;(獲取頁面中文字元素)
var divContent=div.innerHtml;(獲取頁面中文字元素,包括HTML元素)
alert(divContent);

通過getElementsByClassName();
var div=document.getElementsByClassName('cs5')[0];
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='green';
var div=document.getElementsByClassName('cs5')[1];
div.style.width=300+'px';
div.style.height=300+'px';
div.style.background='blue';


通過getElementsByTagName();
var div=document.getElementsByTagName('div')[1];
 var div=div.innerHTML;
 alert(div);


</script>
 </head>
 
 <body>
  <div id="id2"></div>
   <div class="css">
    <div class="cs5"></div>
    <div class="cs5"></div>
    <div class="cs5"></div>
  </div>
 </body>
</html>

陣列

1,宣告陣列
語法結構:
var 陣列名稱=new Array();
var 陣列名稱=[值];
2,陣列的初始化
js是一種弱型別的指令碼語言,索引可以儲存不同資料型別

2,陣列的初始化
初始化一個數組有三種方法：
第一種方式：
陣列名稱=new Array();
陣列名稱[0]=值;
陣列名稱[1]=值;
陣列名稱[2]=值;
第二種方式：陣列名稱=new Array(‘值’,‘值’,‘值’,‘值’);
第三種方式：陣列名稱=[‘值，值，值’];
陣列的屬性：length 獲取陣列的資料長度
3. 運算元組中資料的方法
(1) Join()：將陣列成員通過一個分割符合併成字串
(2) Push()和 pop()：從陣列最後增加成員或是刪除成員
(3) Unshift()和 shift()：從陣列的前面增加成員或是刪除成員
(4) Reverse()：將陣列的數值進行翻轉
(5) Indexof()：返回陣列中元素第一次出現的索引值
(6) Splice()：在陣列中增加或是刪除成員
(7) Slice()：從一個數組中選擇（擷取）元素

在這裡插入圖片描述

獲取元素方法與陣列