1. 程式人生 > >javascript document物件(四)

javascript document物件(四)

javascript document的幾種常用的物件方法

一、document.write();-------->可以直接向頁面輸入內容

例如:document.write("這個我的第一個網頁");

二、document.getElementById();---->獲取指定ID物件

如何通過ID值,來獲取元素裡面的值?

<!DOCTYPE html>

<html>

<head>

    <!--聲明當前頁面的編碼集-->

<meta charset="gb2312">

<!--網頁三要素-->

<title>網站標題</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

</head>

<body>

  <div id="test"><span>這只是測試,能顯示嘛?</span><div>

  <script>

   //第一種方法:

   var value=document.getElementById(test).innerText;

   alert(value);--->這裡輸出的內容是:“這只是測試,能顯示嘛?”

   //第二種方法

   var value1=document.getElementById(test).innerHTML;

   alert(value1);---->這裡輸出的內容是:“<span>這只是測試,能顯示嘛?</span>”

  </script>

</body>

</html>

小結:通過ID獲取裡面元素有兩種方法:

1.document.getElementById(”ID”).innerText。

2.

document.getElementById(”ID”).innerHTML.通過兩者比較不難發現.innerHTML會輸出這個DIV裡面整個元素,而.innerText則只輸出裡面的文字。 

三.document.createElement();--->建立一個html標籤物件

<script type="text/javascript">

//document.createElement():建立一個元素

//appendChild(dom)向頁面新增元素

var divObj = document.createElement("div");

divObj.innerHTML = "<strong>我是一個動態建立的div哦!</strong>";

divObj.style.width = "400px";

divObj.style.height = "300px";

divObj.style.background = "green";

divObj.style.border = "1px solid red";

divObj.style.marginTop = "100px";

document.body.appendChild(divObj);

</script>

四.document.getElementsByName();---->獲得指定name值的物件, 只使用與含有有元素自帶name的標籤

 <input type="checkbox" name="test" value="爬山">爬山

  <input type="checkbox" name="test" value="音樂">音樂

  <input type="checkbox" name="test" value="讀書">讀書

  <input type="checkbox" name="test" value="游泳">游泳

  <script type="text/javascript">

  var divObj = document.getElementsByName("test");

  divObj[2].value = "睡覺";---->重新賦值

  alert(divObj[2].value);

  </script>