萬盛學電腦網 >> 腳本專題 >> 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>
以上就是本文的全部內容了，希望大家能夠喜歡。
