十四. DOM(文档对象模型)

节点：Node——构成HTML文档最基本的单元

  • 文档节点：整个HTML文档
  • 元素节点：HTMl文档中的HTML标签
  • 属性节点：元素的属性
  • 文本节点：HTML标签中的文本内容
<!DOCTYPE html>

<html lang="zh-CN">

<head>

	<meta charset="utf-8">

	<title>test title</title>

</head>

<body>

	<div class="content">

		<button id="btn01">btn1</button>

		<script>

            // 获取button对象

            var btn = document.getElementById("btn01");

            // 修改按钮文字

            btn.innerHTML = "change";

		</script>

	</div>

</body>

</html>

事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说，有下面这些代表性事件：点击、鼠标移至元素上方、按下某个键等。

可以直接将事件写入按钮属性

<body>

	<div class="content">

		<button id="btn01" onclick=fun()>btn1</button>

		<script>

			 function fun(){

			 	document.write('你点我干嘛');

			 }

			console.log(document.getElementById('btn01'));

		</script>

	</div>

</body>

可以为按钮绑定相应的事件

<body>

	<div class="content">

		<button id="btn01">btn1</button>

		<script>

			var btn = document.getElementById('btn01');

			btn.onclick = function(){

				alert("你点我干嘛！");

			};

		</script>

	</div>

</body>

浏览器加载页面时，按照自上向下的顺序，如果将script标签在head中，代码执行时，页面还没有完成加载，绑定按钮的代码无法执行。

可以使用如下方法：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

	<meta charset="utf-8">

	<title>test title</title>

	<script>

        // 将部分代码写入onload事件

		window.onload = function(){

			var btn = document.getElementById('btn01');

			btn.onclick = function(){

				alert("你点我干嘛！");

			}

		};

	</script>

</head>

<body>

	<div class="content">

		<button id="btn01">btn1</button>

	</div>

</body>

</html>

获取元素节点

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

a. 通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

b. 通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有

元素：

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

c. 通过类名找到 HTML 元素

本例通过 getElementsByClassName函数来查找 class="intro" 的元素：

var x=document.getElementsByClassName("intro");

查找元素节点的子节点

getElememtsByTagName() 方法，返回当前节点的指定标签名后代节点

childNodes 属性，表示当前节点的所有子节点

firstChild 属性，表示当前节点的第一个子节点

lastChild 属性，表示当前节点的最后一个子节点

改变 HTML

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

对于自结束标签(<input>)，innerHTML无意义。

改变 HTML 属性

读取元素节点属性：元素.属性名，例如：input.id

注意：class属性时需要使用 元素.className

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

HTML DOM 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

document中的属性

document.body：保存body的引用

document.documentElement：保存html的根标签

document.all：保存页面中所有元素

document.getElementsByTagName(*)：意义同上

document.querySelector()：需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

document.URL：返回一个字符串，表示当前文档的网址。HTML文档独有的。

document.domain：返回当前文档的域名。

document.cookie：操作浏览器Cookie

JavaScript学习 Ⅶ的更多相关文章

  1. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  10. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

随机推荐

  1. php使用json_encode中遇见问题？

    注:php版本5.4下,不支持json_encode对中文的处理,要么升级php版本. json_encode($value,$options) 其中有2个比较常用到的参数: 1.JSON_UNESC ...

  2. 关于thinkhphp3.1中废弃 preg_replace /e 修饰符

    警告:preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead 网上查了下 发现 php5.5版 ...

  3. Memory layout

    Text Segment       Text Segment,通常也被称为代码段. 为了防止 heap 或是 stack 的溢出,text 段常被安排在 heap 或是 stack 之后. Text ...

  4. 从0到70%：Chrome上位揭秘！

    最近的数据显示,Chrome在2020年4月的市场份额达到了70%左右,把微软的Edge和Firefox远远甩在身后,毫无疑问,Chrome赢得了第二次游览器之战,成为新一代王者. Chrome的第一 ...

  5. 授权函数-web_set_certificate_ex

    设置证书和密钥文件属性. int web_set_certificate_ex(const char * option_list,LAST); 该函数与Loadrunner 录制设置属性中的Recor ...

  6. 06.DRF-第一个demo

    一.环境安装与配置 DRF需要以下依赖: Python (2.7, 3.2, 3.3, 3.4, 3.5, 3.6) Django (1.10, 1.11, 2.0) DRF是以Django扩展应用的 ...

  7. 深入理解JVM（③）虚拟机性能监控、故障处理工具

    前言 JDK的bin目录中有一系列的小工具,除了java.exe.javac.exe这两个编译和运行Java程序外,还有打包.部署.签名.调试.监控.运维等各种场景都会用到这些小工具. 这些工具根据软 ...

  8. typora中的图片处理20200622

    typora中的图片处理20200622 食用建议 typora作为markdown的书写神器,一般习惯的流程是在typora中写完,然后复制粘贴到博客园中,然而,markdown中图片采用的是本地连 ...

  9. JAVA设计模式 3【创建型】理解工厂模式与抽象工厂模式

    上一节我们已经学习了原型模式,稍微复习一下:通过重写Object 类的clone() 方法实现浅克隆,浅克隆也要实现Cloneable 标记接口.而深克隆则是将对象通过序列化和反序列化 的方式进行创建 ...

  10. python基础知识扩展（一）

    python课外笔记 1.print函数 print("helloworld")其实系统默认隐藏了一个参数end,完整的print()语句是 print("hellowo ...