十四. 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. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...

  2. 5.kubernetes的服务暴露插件-Traefik

    目录 1.部署traefik 2.准备资源配置清单 3.应用资源配置清单 4.检查创建资源 5.解析域名 6.配置反向代理 7.浏览器访问 部署traefik 在HDSS7-200.host.com上 ...

  3. Golang简易入门教程——面向对象篇

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第9篇文章,我们一起来看看golang当中的面向对象的部分. 在现在高级语言当中,面向对象几乎是不可或缺也是一门语言 ...

  4. Java前端面试题总结

    Java前端面试题总结 简单说一下HTML,CSS,javaScript在网页开发中的定位? HTML:超文本标记语言,定义网页的结构 CSS:层叠样式表,用来美化页面 JavaScript:主要用来 ...

  5. 深入浅出PyTorch（算子篇）

    Tensor 自从张量(Tensor)计算这个概念出现后,神经网络的算法就可以看作是一系列的张量计算.所谓的张量,它原本是个数学概念,表示各种向量或者数值之间的关系.PyTorch的张量(torch. ...

  6. nfiniband网卡安装、使用总结

    最近多次安装.使用infiniband网卡,每次都要到处寻找相关资料,所以决定做此总结,方便查找. 1. 基础知识 首先,得了解什么是RDMA,贴几个资料: 深入浅出全面解析RDMA RDMA技术详解 ...

  7. 程序员如何高效学Python，如何高效用Python挣钱

    本人在1年半之前,不熟悉Python(不过有若干年Java开发基础),由于公司要用Python,所以学习了一通.现在除了能用Python做本职工作外,还出了本Python书,<基于股票大数据分析 ...

  8. IE对于input checkbox onclick方法显示不支持此对象和方法的解决方案

    网站注册页,协议结束后,通过input checkbox勾选,进行下一步,FF没问题,IE一直显示不支持此对象和方法. 网上查找大部分说函数名称与系统函数重名,而事实上不是. <div name ...

  9. java android 序列号serializable和parcelable

    why 为什么要了解序列化?—— 进行Android开发的时候,无法将对象的引用传给Activities或者Fragments,我们需要将这些对象放到一个Intent或者Bundle里面,然后再传递. ...

  10. String类基础知识

    1.String类的构造方法 (1)String(String original)  //把字符串数据封装成字符串对象 (2)String(char[] c)   //把字符数组的数据封装成字符串对象 ...