Javasript文档对象模型

前言

大家都知道，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>

希望这一篇文章能够帮助有有技术困惑的编程爱好者

Javasript文档对象模型

猜你喜欢