JavaScript文档对象模型

文档对象模型(Document Object Model, DOM)是W3C提出的用于访问和修改文档的接口.

JavaScript设计的初衷是为Web提供交互功能,它通过DOM接口来访问和修改文档.

DOM标准被分为3个部分:

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM节点

在DOM中Html文档是一个文档节点, 在Js中可以使用document对象来访问.

Html文档是以树状结构组织的, 每个标签都是一个节点, 树的根节点为<html>标签.

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Hello</title>

</head>

<body>

    <p>Hello World!</p>

</body>

</html>

注意<p>Hello World!</p>其中的文本Hello World!在DOM中被认为是一个文本子节点.

访问节点

DOM标准中提供了3种访问节点的方式:

getElementById
getElementsByTagName
getElementsByClassName

Id可以精确定位元素, TagName和ClassName只能定位一组元素.

DOM中的节点分为Node包括Element, Comment, Documnet等类型, 但是我们主要关心Element.

<!DOCTYPE html>
<html>

<body>

    <p id="p1">Hello World!</p>

    <script type="text/javascript">

        document.getElementById('p1').innerHTML = 'Hello World By Dom!'
        // <p id="p1">Hello World By Dom!</p>

    </script>

</body>

</html>

innerHTML属性是节点开始标签和结尾标签之间的HTML代码, 修改该属性可以修改节点的子树功能强大.

使用innerHTML属性直接编写HTML源码,需要注意防范XSS攻击.

节点的innerText属性会对字符串进行HTML编码, 保证无法设置HTML标签更为安全.

插入节点

appendChild方法可以将节点插入到节点子树的最后一个:

<!DOCTYPE html>
<html>

<body>

    <div id="d">
        <p> Python </p>

    </div>

    <script type="text/javascript">

        var div = document.getElementById('d');
        var js = document.createElement('p')
        js.innerText = 'JavaScript'
        div.appendChild(js)

    </script>

</body>

</html>

若该节点不存在则直接插入, 若存在则进行替换.

insertBefore方法可以在指定节点前插入节点:

<!DOCTYPE html>
<html>

<body>

    <div id="d">
        <p id="py"> Python </p>

    </div>

    <script type="text/javascript">

        var div = document.getElementById('d') 
        var py = document.getElementById('py');
        var js = document.createElement('p')
        js.innerText = 'JavaScript'
        js.id = 'js'
        div.insertBefore(js, py)

    </script>

</body>

</html>

删除节点

removeChild可以用于删除节点:

<!DOCTYPE html>
<html>

<body>

    <div id="d">
        <p id="py"> Python </p>
        <p id="js"> javaScript </p>
    </div>

    <script type="text/javascript">

        var div = document.getElementById('d') 
        var js = document.getElementById('js');
        div.removeChild(js)

    </script>

</body>

</html>

操作表单

HTML表单的输入控件主要有:

文本框<input type="text"> 用于输入文本；
口令框<input type="password">用于输入口令；
单选框<input type="radio">用于选择一项；
复选框<input type="checkbox">用于选择多项;
下拉框<select>用于选择一项；
隐藏文本<input type="hidden">用户不可见但表单提交时会把隐藏文本发送到服务器;

对于text,password, hidden, select型的输入框只需要通过DOM访问input元素的value属性即可得到输入.

<!DOCTYPE html>
<html>

<body>

    <form>
        <label>username: <input id="username" type="text"></label>
        <br><br>
        <label>password:<input id="password" type="password"></label>
    </form>

    <script type="text/javascript">

        var username = document.getElementById('username')
        username.value = "finley"

    </script>

</body>

</html>

对于redio和checkbox需要检查其checked属性

<!DOCTYPE html>
<html>

<body>

    <form>
        <label><input type="radio" id="yes" value="1"> Yes</label>
        <label><input type="radio" id="no" value="2"> No</label>
    </form>

    <script type="text/javascript">

        var yes = document.getElementById('yes') 
        var no = document.getElementById('no') 
        document.write(yes.checked)
        document.write("<br>")
        document.write(no.checked)

    </script>

</body>

</html>

Js还可以通过<form>元素的submit()方法提交表单:

<!DOCTYPE html>
<html>

<body>

    <form id="form1">
        <label>username: <input id="username" type="text"></label>
        <br><br>
        <label>password:<input id="password" type="password"></label>
    </form>

    <script type="text/javascript">

        var form = document.getElementById('form1') 
        form.submit()

    </script>

</body>

</html>

DOM事件

用户事件

事件机制允许当特定事件发生时调用函数进行响应:

被点击onclick
表单提交onsubmit
输入内容改变onchanged
界面被加载onload

更多的事件请参见DOM事件 - 菜鸟教程

onclick事件允许对点击事件进行响应:

<!DOCTYPE html>
<html>

<body>

    <button id="btn">Click Me!</button>

    <script type="text/javascript">

        var btn = document.getElementById('btn')
        btn.onclick = function() {
            btn.innerText = "I am clicked!"
        }


    </script>

</body>

</html>

onsubmit事件通常用于对输入的校验:

<!DOCTYPE html>
<html>

<body>

        <form id="logup">
            <label>username: <input id="username" type="text"></label>
            <br><br>
            <label>password:<input id="password" type="password"></label>
            <br><br>
            <label>repeat:<input id="repeat" type="password"></label>
            <br><br>
            <button id= type="submit">submit</button> 
        </form>

        <script type="text/javascript">

            var form = document.getElementById('logup')
            var password = document.getElementById('password')
            var repeat = document.getElementById('repeat')
            form.onsubmit = function() {
                if (password.value != repeat.value) {
                    alert('repeat password doesn\'t match')
                }
            } 


        </script>

</body>

</html>

时钟事件

setTimeout设定在一段时间间隔之后再执行代码:

<!DOCTYPE html>
<html>

<body>

        <script type="text/javascript">

            setTimeout("alert('Time out!')",10 * 1000)

        </script>

</body>

</html>

第一个参数为String形式的Js代码, 第二个参数是以毫秒为单位的时间间隔.

setTimeout设定的时钟事件只触发一次后停止.

clearTimeout可以取消时钟事件:

<!DOCTYPE html>
<html>

<body>

        <script type="text/javascript">

            var t = setTimeout("alert('Time out!')",10 * 1000)
            clearTimeout(t)

        </script>

</body>

</html>

setInterval方法与setTimeout方法类似,但是会不停地触发事件而非一次之后停止:

<!DOCTYPE html>
<html>

<body>

        <p id='panel'></p>

        <script type="text/javascript">

            var panel = document.getElementById('panel')
            function display() {
                panel.innerText = Date()
            }
            setInterval('display()', 1000)
        </script>

</body>

</html>

clearInterval可以取消时钟事件:

var t = setInterval('display()', 1000)
clearInterval(t)

posted @ 2016-07-25 16:44 -Finley- 阅读(416) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Finley