JavaScript DOM学习笔记
文章平均质量分 55
这个专栏始于我平时学习JavaScript DOM这本书记录下的笔记,旨在于与刚学JavaScript脚本语言的新手一起交流学习
yyanliqi
less interests ,more interest .
展开
-
JavaScript第十章:动画基础知识
前面章节我介绍了如何利用DOM技术修改文档的样式信息。虽然说JavaScript添加样式可以节约时间和精力。但总的来说,CSS仍是完成这类任务的最佳工具。 而如果我们想随着时间的变化不断地改变某个元素的样式,则只能使用JavaScript。动画就是让元素的位置随着时间而不断地变化。1.位置 位置信息通常都是由CSS负责设计的。 下面分别是由CSS设置得位置...原创 2018-10-19 09:24:46 · 244 阅读 · 0 评论 -
JavaScript第九章:何时该用DOM脚本设置样式
我们不应该利用DOM去创建重要的内容,也不应该利用DOM为文档设置重要的样式。1.根据元素在节点树里的位置来设置样式 1)通过CSS声明样式的方式: ①为标签元素统一地声明样式 ②为特定class属性的所有元素统一地声明样式 ③为有独一无二的id属性的元素单独声明样式 2) CSS2引...原创 2018-10-15 09:36:58 · 182 阅读 · 0 评论 -
JavaScript第九章:className属性
与其使用DOM直接改变某个元素的格式,不如通过JavaScript代码去更新这个元素的class属性。 我们回顾下上一节中styleHeaderSiblings是如何添加样式的: function styleHeaderSiblings(){ if(!document.getElementsByTagName) return false; v...原创 2018-10-15 09:56:35 · 778 阅读 · 0 评论 -
JavaScript第九章:style属性
1.三体一位的网页结构层:由HTML或XHTML之类的标记语言负责创建 表示层:由CSS负责,描述页面内容应该如何呈现 行为层:JavaScript语言和DOM负责内容应该如何响应事件这一问题 网页的表示层和行为层总是存在的,即使未明确地给出任何具体的指令也是如此。Web浏览器将应用它的默认样式和默认事件处理函数。 网页设计时,应将结构层、表示层和行为层分离。分别使用...原创 2018-10-13 22:51:00 · 1477 阅读 · 0 评论 -
JavaScript第八章:内容
<!doctype html><html><head><meta charset="utf-8"><title>Explaining the Document Object Model</title></head><body> <h1&原创 2018-10-10 09:10:59 · 146 阅读 · 0 评论 -
JavaScript第八章:显示缩略语部分
这一节我们主要是要用一个定义列表来显示<abbr>标签包含的文本和属性。 下面是我们想要的效果:<dl> <dt>W3C</dt> <dd>World Wide Web Consortium</dd> <dt>DOM</dt> <dd原创 2018-10-12 08:23:03 · 182 阅读 · 0 评论 -
JavaScript第八章:显示"文献来源链接表"
<blockquote cite="http://www.w3c.org/DOM/"> <p> A platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the contents, ...原创 2018-10-12 08:53:34 · 184 阅读 · 0 评论 -
JavaScript第八章:显示“快捷键清单”
1.accesskey属性 accesskey属性:可以把一个元素与键盘上的某个特定的按键关联在一起。 支持accesskey的浏览器有很多。有许多网站都会在一个快捷键清单页面上列明该网站都支持哪些快捷键。 一些基础的快捷键都有约定俗成的设置办法:accesskey=“1”:返回到本网站主页 accesskey=“2”:后退到前一个页面 accesskey=“...原创 2018-10-12 09:09:59 · 222 阅读 · 0 评论 -
JavaScript第八章:介绍
1.不应该做什么 有两项原则要牢记于心: 渐进增强:我们总是从核心的部分,也就是从内容开始。应该根据内容使用标记实现良好的结构,然后再逐步地加强各种行为。这些增强行为既可以是CSS改进呈现效果,也可以是通过DOM添加各种行为。 平稳退化:渐进增强的实现必然支持平稳退化。2.把“不可见”变成“可见” 除了标签之间的内容,标签内的属性也包含语义信息。在对...原创 2018-10-10 08:45:01 · 162 阅读 · 0 评论 -
JavaScript第七章:Ajax
Ajax的优势在于:对于页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求,它会在后台处理请求,与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容,而不会打断用户的浏览体验。1.XMLHttpRequest对象 这个对象充当着浏览器的脚本(客户端)与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求,同时自己处...原创 2018-10-09 21:21:27 · 94 阅读 · 0 评论 -
JavaScript 第二章:语法
1.准备工作 JavaScript编写的代码需要通过HTML/XHTML文档才能执行。 有两种方式可以实现这点。 第一种: 将JavaScript代码放入<head>中的<script>中<!DOCTYPE html><html lang="en"><head> <meta char..原创 2018-09-07 21:21:40 · 190 阅读 · 0 评论 -
JavaScript 第二章:操作
1.算数操作符 加法、减法、除法和乘法都属于一种操作。JavaScript完成操作需要借助各种操作符。 赋值操作符:=。 加法操作符:+。 减法操作符:-。 除法操作符:/。 乘法操作符:*。1 + 4//简单的加法操作1 + 4 * 5//多种操作组合var total=1 + 4 * 5;//变量可以包含操作...原创 2018-09-08 15:54:25 · 376 阅读 · 0 评论 -
JavaScript 第二章:条件语句
1.条件语句 JavaScript使用条件语句来做判断。 常见的条件语句:if(condition){ statements;} 条件放于if后面的圆括号中,条件的求值一直都是布尔值。只有在条件的值为true时,花括号里的语句才会执行。 如果if语句中花括号里只包含一句...原创 2018-09-08 16:25:29 · 125 阅读 · 0 评论 -
JavaScript第二章:循环语句
1.while语句 while循环: 只要给定的条件的结果为true,包含在花括号里的代码将反复地执行下去while( condition){ statements;} do····while循环: 对循环控制的条件的求值发生在每次循环结束之后。因此,即使循环控制条件的首次求值结果是false,包含在花括号...原创 2018-09-09 10:06:12 · 91 阅读 · 0 评论 -
JavaScript第二章:函数
1.介绍 函数:一组允许在你的代码里随时调用的语句。 函数的威力在于,可以把不同的数据传递给它们,而它们使用这些数据完成预定的操作。 定义函数: function name(arguments){ statements;} JavaScript提供了许多内建函数(如前面使用过的aler...原创 2018-09-09 10:30:29 · 157 阅读 · 0 评论 -
JavaScript第二章:对象
1.介绍 对象: 是一种自包含的数据类型。 包含在对象里的数据可以通过两种形式访问 :属性和方法。 属性:隶属于某个对象的变量。 方法:只有特定对象才能调用的函数。 在Ja...原创 2018-09-10 11:02:56 · 110 阅读 · 0 评论 -
JavaScript第三章:DOM
1.文档:DOM中的‘D’ 如果没有document,DOM就无从谈起。 当创建网页并把它加载到Web浏览器,DOM就在幕后悄然而生。它将你编写的网页文档转换为文档对象。2.对象:DOM中的‘O’ JavaScript的对象分为三种: 用户定义对象:由程序员自行创建的对象 内建对象:内建在JavaScript里的对象。(Arr...原创 2018-09-10 11:39:11 · 201 阅读 · 0 评论 -
JavaScirpt第三章:节点
1.介绍 节点:表示网络中的一个连接点。一个网络就是由一些节点组成的集合 DOM也是如此,是由节点构成的集合。DOM有许多不同类型的节点,我们先关注:元素节点、文本节点和属性节点2.元素节点 元素节点:DOM的原子。(例如上次购物清单的文档中,使用了<body>、<p>,<ul>等元素,这些元素构成了文...原创 2018-09-11 11:08:23 · 124 阅读 · 0 评论 -
JavaScript第三章:获取和设置属性
根据上一节介绍的三种获得元素的方法,得到所需要的元素之后,我们可以设法获得它的各个属性。 getAttribute()就是用来获得元素的属性,而setAttribute()可以修改属性节点的值。1.getAttribute(attribute) getAttribute方法不属于document对象,只能通过元素节点对象调用。object.getAttribute...原创 2018-09-12 14:10:21 · 147 阅读 · 0 评论 -
JavaScript第四章:标记
1.介绍 这一章,我们将尝试用JavaScript和DOM建立一个图片库。把整个图片库的浏览器链接集中安排在图片库主页里,只有用户点击了该主页的某个图片的链接才把相应的图片传给他。2.标记 第一项工作:为这些图片创建一个链接清单。<!doctype html><html><head><meta charset="u...原创 2018-09-12 15:09:58 · 152 阅读 · 0 评论 -
JavaScript第四章:JavaScript
把占位符上的图片替换成想要查看的图片,可以利用setAttribute改变它的src属性。 我们要写一个函数,函数有一个参数及图片的链接。它可以通过改变占位符的src属性更换为参数图片。 function showPic(whichPic)//whichPic为元素节点,在本例中就是指向某图片<a>元素whichPic.getAttribute(“href”...原创 2018-09-19 09:48:36 · 287 阅读 · 0 评论 -
JavaScript第四章:应用这个JavaScript函数
将之前写过的JavaScript函数写入独立的.js文件,将它放入一个子目录scripts。 在图片库文档中插入链接引入这个JavaScript脚本文件。<script type="text/javascript" src="scripts/showPic.js"></script> 接下来,我们要给图片列表的链接添加行为,也就是事件处理函数。1....原创 2018-09-19 10:20:14 · 197 阅读 · 0 评论 -
JavaScript第四章:对这个函数进行扩展
这一节我们将介绍如何用JavaScript语言和DOM,在同一个网页上切换显示不同的文本。 首先介绍几个新的DOM属性1.childNodes属性 childNodes属性:可以用来获得任何一个元素的子元素。它是包含了这个元素的所有子元素的数组。var body_element=document.getElementsByTagName("body")[0];/...原创 2018-09-19 11:01:58 · 165 阅读 · 0 评论 -
JavaScript第五章:平稳退化
1.平稳退化 平稳退化:如果正确地使用了JavaScript脚本,就可以让访问者的浏览器不支持JavaScript的情况,仍能顺利地浏览你的网站。 注意:应该只在绝对必要的情况才使用弹出窗口。 创建新的浏览窗口:使用window对象的open()方法。 open()方法是使用BOM的一...原创 2018-09-21 10:22:58 · 139 阅读 · 0 评论 -
JavaScript第五章:向CSS学习
1.结构与样式的分离 CSS技术最大的优点:能够帮助你将Web文档中的内容结构和版面设计(样式)分离开来。 文档结构与样式的可以确保是网页都能平稳退化。2.渐进增强 渐进增强:用一些额外的信息去包裹原始数据。按照"渐进增强"原则创建出的网页几乎都符合‘平稳退化’原则。 在创建网站的时候,给内容加上正确的HTML标记是第一个步骤。在给内容加上各种标记后...原创 2018-09-21 10:41:26 · 632 阅读 · 0 评论 -
JavaScript第五章:分离JavaScript
实际上,负责各项任务的JavaScript函数已存入外部文件,问题出在内嵌的事件处理函数中。 如果我们适用一个“挂钩”,就像css机制中的class或id属性那样,JavaScript代码调用行为与HTML文档的结构与内容分离开。 JavaScript语言不要求事件必须在HTML中处理,我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上。elem...原创 2018-09-21 11:20:47 · 230 阅读 · 0 评论 -
JavaScript第五章:向后兼容
1.对象检测 上一节中,我们一直强调,网页的访问者的可能使用了不支持JavaScrip的浏览器t或使用的是古老的浏览器。因此,JavaScript脚本可能在这些访问者的浏览器上不能正常工作。 解决这个问题的方案中之一:检查浏览器对JavaScript的支持程度。 对象检测:只要将某个方法打包在一个if语句,就可以根据这个if语句的条件表达式的求值结果决定采取怎样的行动。...原创 2018-09-22 15:25:03 · 387 阅读 · 0 评论 -
JavaScript第五章:性能考虑
1.尽量少访问DOM和尽量减少标记 正如我们所知,只要查询DOM中的某些元素,浏览器就会搜索整个DOM元素,从中查找可能的元素。 ①在多个函数都会取得类似的一组元素时,可以考虑重构函数,把搜索结果保存在一个全局变量里,或者把一组元素直接以参数形式传递给参数。 ②尽量减少文档里的标记数量。过多不必要的元素只会增加DOM树的规模,进而增加遍历DOM树以查找元素的时间...原创 2018-09-22 15:48:42 · 109 阅读 · 0 评论 -
JavaScript第六章案例研究:图片库的改进版1
1.它支持平稳退化吗? ①如果JavaScript功能被禁用,会怎样? 即使JavaScript被禁用,网页的所有链接工作也都可以正常工作。 ②如果选用的是“javascript:”伪协议呢? 不支持在禁用了JavaScript的浏览器的浏览 ③如果在链接中使用的是“#”呢? 与②情况相同。 2.它的Java...原创 2018-09-25 09:25:38 · 216 阅读 · 0 评论 -
JavaScript案例分析:图片库改进版(2)
1.优化 showPic函数中里仍存在一些需要处理的假设 ①检查title属性是否存在,可以测试它是否为null var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; ②检查placeholder元素是否存在,但需要假设那是张照片。 nodeNam...原创 2018-09-26 09:41:07 · 187 阅读 · 0 评论 -
JavaScript第七章:一些传统方法
过去我们常常由标记创建网页结构,用JavaScript改变某些细节而非底层结构。这一章我们将要学习一些DOM方法,通过创建新元素和修改现有元素改变网页结构。首先回顾过去使用的两种技术document.write和innnerHTML。1.document.write document对象的write()可以快捷地把字符串插入文档中。<!DOCTYPE html>...原创 2018-09-28 09:06:39 · 235 阅读 · 0 评论 -
JavaScirpt第七章:重回图片库
在过去的图片库HTML文件中有一个图片和文字是为了showPic脚本服务的。若能将结构和行为彻底分开就最好不过。既然这些元素的存在是为了让DOM方法处理它们,那么用DOM方法创建它们才是最合适的选择。 var placeholder=document.createElement("img"); placeholder.setAttribute("id","placeholder")...原创 2018-09-28 20:43:35 · 154 阅读 · 0 评论 -
JavaScript第七章:DOM方法
在DOM看来,一个文档就是一棵节点树,如果想在节点树上添加内容,就必须插入新的节点。如果你想添加一些标记到文档,就必须插入元素节点。 1.createElement方法 <div id="testdiv"> </div> 如果想把一段文本插入testdiv元素,用DOM语言就是想添加一个p元素节点,并把这个节点作为div节点的一个子节点...原创 2018-09-28 19:52:40 · 153 阅读 · 0 评论