JavaScript中獲取頁面元素的方式
阿新 • • 發佈：2018-12-03
一.charAT():表示是把字串中的每一個字母按照字元轉換輸出.
例:
<script type="text/javascript"> var str='i love javascript'; for(var i=0;i<str.length;i++){ // alert(str.length);//輸出值為17,獲取陣列的長度 // alert(str[i]);//輸出i // document.write(str[i]);//輸出i love javascript var chars=str[0]; // alert(typeof chars);//輸出結果string // if(str[i]<='o'){ //在這裡的判斷是根據字母的大小順序來判斷輸出 // document.write(str[i]);//輸出結果為i loe jaaci // } // if(str.charAt(i)>="o"){//charAt(i):表示是把字串中的每一個字母 按照字元轉換輸出 // continue; // } // document.write(str.charAt(i));//結果i le jaaci alert(str.indexOf('o')); //查詢字串中或是陣列中字元的索引 if(i<3){ document.write(str[i]); } }
二.獲取頁面元素的方式
1.通過js的dom方法:可以使用內建物件 document 上的 getElementById 方法來獲取頁面上設 置了 id 屬性的元素,獲取到的是一個 html 物件,然後將它賦值給一個變數.
獲取頁面元素那麼必須將獲取元素的程式碼塊放置在事件中
如果把 javascript 寫在元素的上面,就會出錯,因為頁面上從上往下載入執行的,javascript 去頁面上獲取元素 div1 的時候,元素 div1還沒有載入,解決方法有兩種：
(1)將 javascript 語句放到 window.onload 觸發的函式裡面,獲取元素的語句會在頁面載入完後才執行.
例:
<script type="text/javascript"> window.onload=function(){ var div=document.getElementById('div1'); // alert(div);//輸出結果為[object HTMLDivElement] div.style.width=200+'px'; div.style.height=200+'px'; div.style.background='red'; // div.style.border='5px dashed black';//兩種書寫格式 div.style.borderWidth=5+'px'; div.style.borderColor='red'; div.style.borderStyle='dashed'; // 獲取頁面中div的值(innerHTML與innerTEXT) var divContent=div.innerHTML;//獲取頁面元素中的內容(包含元素中的HTML的子元素) alert(divContent);//輸出結果為 Hello JavaScript<p>愛學習</p> // var divContent=div.innerText;//獲取頁面中文字內容 // alert(divContent); } </script> ................ <body> <div id="div1">Hello JavaScript<p>愛學習</p></div> </body>
innerHTML與innertext
(2)：將 javascript 放到頁面最下邊 (寫入body中)
例:
<body>
<div class="div1" id="div1">Hello JavaScript<p>愛學習</p></div>
<script type="text/javascript">
// 1,通過id來獲取頁面元素
// 獲取頁面元素,那麼必須將獲取元素的程式碼塊放置到事件中
var div=document.getElementById('div1');
// alert(div); 返回的結果為: [object HTMLDIVElement]
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='red';
// div.style.border='10px dashed black';
div.style.borderColor='black';
div.style.borderWidth=10+'px';
div.style.borderStyle='dashed';
// 獲取頁面中div的值
// innerHTML: 獲取頁面元素中的內容(包含元素中的html子元素)
// var divContent =div.innerHTML;
// innerText:獲取頁面元素中的文字內容
// var divContent=div.innerText;
// alert(divContent);
// var divWidth=div.innerWidth;
// alert(divWidth);
div.innerHTML='<a href="#">超連結</a>學的不僅是技術'
</script>
</body>
2.通過getElementsByclassName()根據元素的class獲取元素
因為getElementsByClassName()獲取到的結果是一個集合,要想獲取單個的元素使用索引的方式獲取
例:
<script type="text/javascript">
window.onload=function(){
var div=document.getElementsByClassName('div1')[0];
// alert(div);//輸出結果為undefined
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='green';
}
</script>
3.通過getElementsByTagname():根據元素標籤名稱獲取元素
例:
<script type="text/javascript">
window.onload=function(){
var div=document.getElementsByTagName('div')[0];
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='green';
var divcontent=div.innerText;
alert(divcontent);
}
</script>