文档对象模型(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)

JavaScript文档对象模型的更多相关文章

  1. JavaScript编程：文档对象模型DOM

    5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...

  2. JavaScript中的文档对象模型

    1. DOM基本介绍1 什么是DOMDOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那 ...

  3. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  4. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  5. 前端-javascript-DOM(重点)文档对象模型

    1.DOM概念-文档对象模型 // 什么是DOM ? /* Document Object Model 文档对象模型 面向对象: 三个特性 封装 继承 多态 一个对象: 属性和方法 说 万事万物皆对象 ...

  6. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  7. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  8. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  9. 文档对象模型DOM

    文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...

随机推荐

  1. WPF核心对象模型-类图和解析

    DispatcherObject是根基类,通过继承该类,可以得到访问创建该对象的UI线程的Dispatcher对象的能力.通过Dispatcher对象,可以将代码段合并入该UI线程执行. Depend ...

  2. DevOps Workshop 研发运维一体化（成都站) 2016.05.08

    成都的培训与广州.上海.北京一样,只是会议室比较小,比较拥挤,大家都将就了.可惜换了电脑以后,没有找到培训时的照片了,遗憾. 培训思路基没有太大变化,基本按照下面的思路进行: 第一天对软件开发的需求管 ...

  3. java入门——第一个java程序

    来源:https://course.tianmaying.com/java-basic%2Bjava-hello-world# java的基础特征 1 Java是一种大小写敏感的语言 2 程序的文件名 ...

  4. 《Python绝技：运用Python成为顶级黑客》 用Python实现免杀

    1.免杀的过程: 使用Metasploit生成C语言风格的一些shellcode作为载荷,这里使用Windows bindshell,功能为选定一个TCP端口与cmd.exe进程绑定在一起,方便攻击者 ...

  5. Django安装(第一个项目)

    day60 从系统中选择已存在的解释器. 新建Django项目         命令行创建:             django-admin startproject mysite          ...

  6. JAVA抽象类和抽象方法(abstract)

    一.抽象(abstract)的使用 当父类的某些方法不确定时,可以用abstract关键字来修饰该方法[抽象方法],用abstract来修饰该类[抽象类]. 我们都知道,父类是将子类所共同拥有的属性和 ...

  7. PostgreSQL 数据库错误代码解释

    PostgreSQL 服务器发出的所有消息都赋予了五个字符 的错误代码, 这些代码遵循 SQL 的 "SQLSTATE" 代码的习惯.需要知道发生了什么错误条件的应用通常应该测试错 ...

  8. C#4.0使用dynamic 动态添加属性

    最近做一个项目,用wpf mvvm实现,而前台表格需要根据数据库某表的设置不同生成不同的列名.过去用winform和Ado.net实现这种功能的时候就只需要拼装DataTable,拼成最后需要的表格, ...

  9. php 词法分析，语法分析

    php的词法分析 可以理解为 通过一定的规则,把输入的代码 区分出哪些是 是$开头的变量, 哪些是 以两个单引号括起来的字符串,哪些是以两个双引号括起来的字符串 等等, 这些区分出来的东西 称为tok ...

  10. A Node Influence Based Label Propagation Algorithm for Community detection in networks 文章算法实现的疑问

    这是我最近看到的一篇论文,思路还是很清晰的,就是改进的LPA算法.改进的地方在两个方面: (1)结合K-shell算法计算量了节点重重要度NI(node importance),标签更新顺序则按照NI ...