十四. 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. 2020阿里最新出品的泰山版Java开发手册，告别垃圾代码

    说起华山,我就想起岳不群,不,令狐冲:说起泰山,我就想起司马迁,他的那句名言"人总有一死,或重于泰山,或轻于鸿毛",真的发人深省啊.这就意味着,阿里出品的泰山版 Java 开发手册 ...

  2. nginx下如何l在网站目录的二级目录下url重写的方法

    以我新项目为例子,该项目要求用laravel来做,因此我把整个项目丢到一个叫laravel的文件夹里面了,目录就变成c:/nginx/html/laravel了,然后发现只能通过localhost/l ...

  3. [转] C++中的namespace

    点击阅读原文 namespace中文意思是命名空间或者叫名字空间,传统的C++只有一个全局的namespace,但是由于现在的程序的规模越来越大,程序的分工越来越细,全局作用域变得越来越拥挤,每个人都 ...

  4. Second Large Rectangle【单调栈】

    Second Large Rectangle 题目链接(点击) 题目描述 Given a N×MN \times MN×M binary matrix. Please output the size ...

  5. Java 异常处理的十个建议

    前言 Java异常处理的十个建议,希望对大家有帮助~ 本文已上传github: https://github.com/whx123/JavaHome 公众号:捡田螺的小男孩 一.尽量不要使用e.pri ...

  6. 使用三台云服务器搭建真正的Redis集群

    三台云服务器搭建redis集群# 今天花了一天的时间弄集群redis:遇到了很多坑,从头开始吧 环境讲解: 两台配置:1核2G,另一台:1核1G: 操作系统:Centos 7.6 Redis:3.2. ...

  7. 几种颜色模型(颜色空间)：HSV CMYK RGB

    RGB和CMY颜色模型都是面向硬件的,而HSV(Hue Saturation Value)颜色模型是面向用户的. HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. ...

  8. JavaSE基础之数组

    数组 一.静态初始化 格式一 数据类型[] 变量名 = {元素1,元素2,元素3...}; 格式二 数据类型[] 变量名 = new 数据类型{元素1,元素2,元素3...}; 或者: 数据类型[] ...

  9. 深入理解Java虚拟机学习笔记（二）-----垃圾收集器与内存分配策略

    写在前面 本节常见面试题: 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好处). 如何判断一个常量是废弃常量 如何 ...

  10. IP地址、计算机名称、MAC地址如何获取

    以下的操作都在“命令提示窗口”中操作. 已知IP,如何获得计算机名称 方法(1): 使用ping -i ip地址 例如已知地址为192.168.1.168. 那么使用ping -i 192.168.1 ...