?????? DOM ??

??? ??????

DOM(?? ?? ??)? ?? ??? ??? ?? ??? ?? W3C ???? ???? ?? ????? ????????. ?? ?? ??? ??? 1990?? ?? Microsoft? Netscape ??? "???? ??"?? ??? ?????. JavaScript? JScript? ??? ?? ???? ?? ? ???? ????? ???? ??? ??? ??????. Microsoft? VBScript, ActiveX ? Microsoft ??? DHTML ??? ???? ?? ?? ??? ? ??? ??????. ?? ?? ?? ? ???? Microsoft? ?? ??? ? ????? ???? ??? ???? ?? ?????. DOM? ?? ??? ????.

DOM(Document Object Model)? HTML ? XML? API(?? ????? ?????)???. DOM? ?? ???? ?? ???? ??? ??? ?????.

?????? ?? ?? ??? ??? HTML? ??, ??, ??, ???, ID ?? ?? ? ??? HTML? ??? ??? ????? ??? ????. ?? ??? DOM? ?? ???? ? ????. .

? ? ? ? ? ? ? ????? JavaScript? Html ???? ???? Html? DHtml? ???? ??, Html ???? ????? DOM? ?????. DOM? Html ???? ??? ????????. JavaScript? ?? ??, ?? ? ?? ??? ???? Html? ??? ? ??? ?? ??? ?? ???.

?????? DOM? HTML ???? ?????. ? ??? ??? ?????. JavaScript? DOM? ??? ???? ???? ? ???? ??? ??, ??? ? ?? ??? ????? ???? ??? ? ????. ?? ?? ??? ??? DOM ??? ???? ??? ??? ?? ?? ??? ? ????.

JavaScript? ???? ?? HTML ??? ??? ? ????

JavaScript? ???? ?? CSS ???? ??? ? ????

JavaScript? ???? ?? ???? ??? ? ????

?? HTML ??

????? JavaScript??? HTML ??? ???? ???.

? ??? ????? ?? ??? ??? ???. ?? ???? ? ?? ??? ????:

ID? HTML ?? ??

?? ???? HTML ?? ??

??? ???? HTML ?? ??

DOM?? HTML ??? ?? ?? ?? ??? ?? ID? ???? ????. .

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>
 <script>
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //彈出    我是第一個P
        }
  </script>
</body>
</html>

?? ???? HTML ?? ??

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>
    <script>
        window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //輸出  我是第二個P，因為獲取的是索引為1的P，索引從0開始
        }   
      </script>
</body>
</html>

??? ???? HTML ?? ??

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1" class="class1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>
    <script>
        window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }
      </script>
</body>
</html>

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <head> <style type="text/css"> body {background-color:#eeeeee} </style> </head> <body> <h3>通過 id 查找 HTML 元素</h3> <p id = "hw">Hello world!</p> <script> x = document.getElementById("hw"); document.write('<p>id="hw"的段落的文本是：'+x.innerHTML+'</p>'); </script> <button onclick = "setCurrentTime()">將id="hw"的文字改為當前時間</button> <script> function setCurrentTime(){ x = document.getElementById("hw"); x.innerHTML = Date() } </script> <h3>通過標簽名查找 HTML 元素</h3> <div id = "mainDiv"> <p>This is a paragragph.</p> <p>This is another paragragph.</p> <p>Yes you're right! This is also paragragph.</p> </div> <script> xx = document.getElementById("mainDiv"); tagContents = xx.getElementsByTagName("p"); document.write("<p>使用Javascript查找id為mainDiv下的p標簽的內容</p>"); for(i=0;;i++){ var tag = tagContents[i] if(tag!=null){ document.write("<p>"+tag.innerHTML+"</p>") }else{ document.write("<p>共有"+i+"條內容</p>") break; } } </script> <h3>修改 CSS 樣式</h3> <p> <span id = "para_1">This is a test paragraph.</span> <button onclick="changeTextColor()">改變文字顏色</button> </p> <p> <span id = "para_2">This is another paragraph. <button onclick="changeTextFont()">改變字體</button> </p> <p> <span id = "para_3">This is HELLO WORLD.</span> <button onclick="changeTextSize()">改變字號</button> </p> <p> <button onclick="changeVisibility()">顯示/隱藏</button> <span id = "para_4">示例文字</span> </p> <script> function changeTextColor(){ ele_1 = document.getElementById("para_1"); ele_1.style.color = "red"; } function changeTextFont(){ ele_2 = document.getElementById("para_2"); ele_2.style.fontFamily = "Arial"; } function changeTextSize(){ ele_3 = document.getElementById("para_3"); ele_3.style.fontSize = "larger"; } document.getElementById("para_4").style.visibility = "visible" function changeVisibility(){ ele_4 = document.getElementById("para_4"); if(ele_4.style.visibility.match("visible")){ ele_4.style.visibility = "hidden" }else{ ele_4.style.visibility = "visible" } } </script> </body> </html>

?????? ???

????