十四. 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. pytest 多个PY文件执行共享变量及用fixture和conftest

    ------------恢复内容开始------------ 1.pytest需要测试多个py文件,这些文件有一定的依赖关系,同时执行的时候,需要只执行一次初始化setup,结束再执行一次teardo ...

  2. TensorFlow从0到1之TensorFlow实现简单线性回归（15）

    本节将针对波士顿房价数据集的房间数量(RM)采用简单线性回归,目标是预测在最后一列(MEDV)给出的房价. 波士顿房价数据集可从http://lib.stat.cmu.edu/datasets/bos ...

  3. 浅淡i.MX8M Mini处理器的效能以及平台对比

    i.MX 8M Mini是恩智浦首款嵌入式多核应用处理器,定位在任何通用工业和物联网的应用,是一款针对边缘计算应用的芯片,也是恩智普i.MX系列中第一个加了机器学习核的产品线.这颗芯片采用先进的14L ...

  4. 通用！Python保存一个对象的方式

    参考资料: https://kite.com/python/answers/how-to-save-a-dictionary-to-a-file-in-python 通过如下的代码,可以将Python ...

  5. MySQL的使用方法和视图、索引、以及存储过程的一些简单方法

    一,基本概念 1, 常用的两种引擎:         (1) InnoDB        a,支持ACID,简单地说就是支持事务完整性.一致性:         b,支持行锁,以及类似ORACLE的一 ...

  6. 看了Java的Class的源码，我自闭了

    java源码之Class ​ 源码的重要性不言而喻,虽然枯燥,但是也有拍案叫绝.这是我的源码系列第二弹,后续还会一直更新,欢迎交流.String源码可以看我的Java源码之String,如有不足,希望 ...

  7. Javascript数组迭代精髓，拿去花

    数组迭代 数组迭代是处理各数组的利器,编写代码时常常会用到,为我们提供了大大的便利.如果还不知道,真的别告诉别人你知道js哈哈. 以下迭代方法均不会改变原数组,带*为必选对象. 1.arr.forEa ...

  8. maven依赖冲突以及解决方法

    什么是依赖冲突 依赖冲突是指项目依赖的某一个jar包,有多个不同的版本,因而造成类包版本冲突 依赖冲突的原因 依赖冲突很经常是类包之间的间接依赖引起的.每个显式声明的类包都会依赖于一些其它的隐式类包, ...

  9. 【DP-动态代理】JDK&Cglib

    需求:增强未知方法的代码 简单方案:继承或者聚合 继承,调用方法前后加增强逻辑 聚合 - 静态代理 持有被代理类对象 或者接口 可通过嵌套实现代理的组合 和 装饰器模式很像 高级方案 代理所有的类,不 ...

  10. Django的F查询和Q查询,事务,ORM执行原生SQL

    F查询和Q查询,事务及其他   F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个我们自己设定的常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django ...