Javasript文件物件模型
阿新 • • 發佈：2018-12-11
前言
大家都知道，JavaScript其實它就是一個弱型別語言，像什麼發展歷史，它有什麼作用和使用JavaScript的好處是什麼，在這裡我就不多說了，下面我就以一些簡單的案例做例子，如果有興趣的話，請看下文。
（1）改變背景的顏色
<html> <head> <meta charset="x-UTF-16LE-BOM"> <title>改變頁面的顏色</title> <script> function changeColor(value) { document.body.style.backgroundColor = value; } </script> <body> <input type="radio" value="red" onclick="changeColor(this.value)">紅色 <input type="radio" value="080808" onclick="changeColor(this.value)">不知道 </body> </head> </html>
（2）文件物件的的屬性和方法
| 節點型別數值 | 節點型別 | 說明 | 例項 |
|---|---|---|---|
| 1 | 元素（Element） | HTML標記元素 | <p>javascript</p> |
| 2 | 屬性(Attribute) | HTML標記元素的屬性 | color="080808" |
| 3 | 文字(Text) | HTML標記的文字段 | Hello World |
| 8 | 註釋(Comment) | HTML註釋段 | <!---javascript----> |
| 9 | 文件(Document) | HTML文件文字物件 | <html> |
| 10 | 文件型別(DocumenType) | 文件型別 | <!DOCTYPE Html> |
（1.1）元素節點
<html> <head> <meta charset="x-UTF-16LE-BOM"> <title>元素節點</title> <body> <p>I love javascript</p> </body> </head> </html>
（1.2）屬性節點
<html>
<head>
<meta charset="x-UTF-16LE-BOM">
<title>屬性節點</title>
<body>
<p style="color: aqua">I love javascript</p>
</body>
</head>
</html>（1.3）文字節點
<html>
<head>
<meta charset="x-UTF-16LE-BOM">
<title>文字節點</title>
<body>
Hallo World!
</body>
</head>
</html>（1.4）註釋節點
<html>
<head>
<meta charset="x-UTF-16LE-BOM">
<title>註釋(Comment)節點</title>
<body>
<!---註釋(Comment)節點---->
Hallo World!
</body>
</head>
</html>（1.5） 文件(Document)
<html>
<head>
<meta charset="x-UTF-16LE-BOM">
<title>註釋(Comment)節點</title>
<body>
Hallo World!
</body>
</head>
</html>（1.6）文件型別(DocumenType)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id = "btnDemo" type="button" value="測試">
<script>
var btn = document.getElementById("btnDemo");
btn.onclick = function () {
alert(this == event.currentTarget);
alert(event.target == this);
alert(event.currentTarget==event.target)
};
</script>>
</body>
</html>希望這一篇文章能夠幫助有有技術困惑的程式設計愛好者