萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> DOM操作一些常用的屬性匯總

DOM操作一些常用的屬性匯總

 這篇文章主要介紹了DOM操作一些常用的屬性匯總,總結的相當全面,附上示例,是篇非常不錯的學習提高DOM操作的文章,推薦給大家。

   

1.DOM:文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。

2.DOM的一些常用的屬性

  2.1 通過ID獲取元素

    (1)語法:

 

代碼如下:
document.getElementById("id");

 

    (2)作用:id就向一個人的身份證,我們可以通過尋找標簽的id來尋找標簽,然後進行相應的操作。

    (3)注意:不要忘記寫document!

  2.2 innerHTML屬性

    (1)語法:

 

代碼如下:
Obgect.innerHTML="Hello World"

 

    (2)作用:主要是對標簽內的內容進行獲取或替換

    (3)例子:

 

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基於對象、事件驅動的簡單腳本語言,嵌入在HTML文檔中,由浏覽器負責解釋和執行,在網頁上產生動態的顯示效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標簽內容
mychar.innerHTML="Hello World!";
document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標簽內容
</script>
</body>
</html>

 

    (4)注意:Object是獲取的元素對象,如通過document.getElementById("ID")獲取的元素。

  2.3 改變HTML樣式

    (1)語法:

 

代碼如下:
Object.style.property

 

    (2)作用:用於修改HTML樣式

    (3)例子:

 

代碼如下:
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300px";
</script>
</body>

 

    (4)注意:property有很多的樣式,比如color,height等等都可以用這個方法去修改,在一個就是不要忘記屬性後面都要加分號”“。

  2.4 顯示和隱藏(display屬性)

    (1)語法:

Object.style.display=value
(2)作用:網頁中常看到顯示和隱藏,就是用display屬性來實現的

    (3)例子:

 

代碼如下:
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>

 

    (4)注意:value的值為none和block,其中none為不顯示內容,而block為顯示內容

  2.5 className屬性

    (1)語法:

 

代碼如下:
Object.className=classname

 

    (2)作用:1.獲取元素的class屬性;2.為網頁中的某一個元素指定一個css樣式來改變改元素的外觀

    (3)例子:

 

代碼如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>

 

以上就是本文的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved