JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法
准备工作
一个普通的文本编辑器,一个Web浏览器。
JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head>标签中的<script>标签之间;一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件,在文档<head>部分放一个<script>标签,并把它的src属性指向该文件。
但最好的做法是把<script>标签放到HTML文档的最后,</body>标签之前:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Example</title> </head> <body> ... <script src="file.js"></script> </body> </html>
JavaScript是一门解释型语言,Web浏览器是其解释器,负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
语法
JavaScript是一种弱类型语言,它不需要对变量进行类型声明。这意味着可以在任何阶段改变变量的数据类型。
字符串
var mood = "don't ask"; //如果字符串包含双引号,就把整个字符串放在单引号里;如果字符串包含单引号,就把整个字符串放在双引号里 var mood = 'don\'t ask'; //如果字符串包含单引号,还想放在单引号里,就必须使用对其进行转义 var height = "about 5'10\" tall";
数组
var beatles = Array(4); //声明数组的同时可以指定数组长度 var beatles = Array(); //也可以不给出元素个数 var beatles = Array("John", "Paul", "George", "Ringo"); //声明数组的同时进行赋值 var beatles = ["John", "Paul", "George", "Ringo"]; //方括号 var lennon = ["John", 1940, false]; //不同数据类型存入一个数组 var beatles = []; beatles[0] = lennon; //数组的元素为数组,beatles[0][0]的值是"John" var lennon = Array(); //关联数组 lennon["name"] = "John"; lennon["year"] = 1940; lennon["living"] = false;
对象
var lennon = Object(); //使用Object关键字创建对象 lennon.name = "John"; lennon.year = 1940; lennon.living = false; var lennon = {name:"John", year:1940, living:false}; //使用大括号创建对象
条件语句
比较操作符
var a = false; var b = ""; if(a==b){ alert("a equals b"); //true,因为==认为空字符串与false含义相同 } var a = false; var b = ""; if(a===b){ alert("a equals b"); //true,因为全等操作符===不仅判断变量的值,同时判断变量的类型 } //对于!=同样如此,!== 比较严格不相等
对象
内建对象 如Array, Date, Math
宿主对象 如Form, Image, Element, document
2.DOM
DOM把一份文档表示为一棵树。
节点
元素节点
文本节点
属性节点
<p title="a gentle reminder">Don't forget to but this stuff.</p> //p是一个元素节点,title是一个属性节点,Don't ... 是一个文本节点
获取元素
有3中DOM方法可以获取元素节点
getElementById
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Example</title> </head> <body> <ul id="purchases"> <li>A tin of beans</li> <li class="sale">Cheese</li> <li class="sale">Milk</li> </ul> <script> alert(typeof document.getElementById("purchases")); </script> </body> </html> //output : Object
getElementsByTagName
document.getElementsByTagName("li"); //它返回的是一个对象数组。
var shopping = document.getElementById("purchases"); var items = shopping.getElementsByTagName("*"); alert(items.length);//output : id属性值为purchases的元素包含的列表项的个数
getElementsByClassName
document.getElementsByClassName("important sale");
设置和获取元素属性
getAttribute
var paras = document.getElementsByTagName("p"); for(var i=0; i<paras.length; i++){var title_text = paras[i].getAtrribute("title"); if(title_text) alert(title_text); }
setAttribute
var shopping = document.getElementById("purchases"); shopping.setAttribute("title", "a list if goods");//如果没有这个属性,就先创建这个属性,然后设置它的值;如果本身就有这个属性,这个属性的值会被覆盖掉//setAttribute做出的修改不会反映在文档本身的源代码, 这是因为DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容 //这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面
转载于:https://www.cnblogs.com/yumo/p/6155871.html
JavaScript DOM编程艺术 - 读书笔记1-3章相关推荐
- Javascript DOM 编程艺术读书笔记16/04/01
愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术简略笔记
简略目录 1.BOM 2.DHTML 3.数组 4.条件判断的注意点 5.函数中变量的作用域问题 6.几种对象的简介 7.BOM和DOM 8.DOM操作中的一些特别点 9.JS文件与CSS文件的引入方 ...
- JavaScript Dom编程艺术学习笔记(第4章)
案例研究:JavaScript图片库(待补充) (笔记并不覆盖章节所有内容,只记录个人认为的重点和难点) 一.DOM操作 placeholder.setAttribute("src" ...
- 【JavaScript DOM 编程艺术】 笔记
第一章:JavaScript 简史 1.1 javascript的起源 JavaScript是一种脚本语言,通常只能通过web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,需要由Web浏览 ...
- JavaScripting DOM编程艺术读书笔记(4-1)
第4章案例研究:JavaScript美术馆 现在,是时候利用DOM去完成一些简单的任务了.在这一章中,我将带领大家用JavaScript和DOM去建立一个图片库,并将其称为"JavaScri ...
- 《JavaScript DOM编程艺术》笔记1
1:DOM的学习 一份文档就是一棵节点树: 节点分为不同的类型:元素节点,属性节点,文本节点: getElementById返回的是一个对象: getElementByTagName和getEleme ...
- 《JavaScript DOM编程艺术》笔记
1. 把<script>标签放到HTML文档的最后,<body>标签之前能使浏览器更快地加载页面. 2. nodeType的常见取值 元素节点(1) 属性节点(2) 文本节点( ...
- 《JavaScript DOM 编程艺术》读书笔记
<JavaScript DOM 编程艺术>读书笔记--其一 第二章 1.Javascript代码编写方式: (1)将JavaScript代码放在文档<head>标签中的< ...
最新文章
- JavaScript语言基础12
- React 中 $$typeof 的作用
- 獲取mysql字段的注释或描述
- linux mysql 5.0.45_linux 下安装mysql-5.0.45.tar.gz
- 小米回应“米家”商标争议;人人 App 回归社交市场;TiDB 2.1.19 发布| 极客头条...
- oracle分同步事务和异步事务,oracle的事务隔离
- Python学习笔记11:标准库之文件管理(os包,shutil包)
- Matter 协议,IoT 智能家居混乱时代的终结者
- 社会学概论(本专)【1】
- 高精度文字识别工具,图片转文字工具免费版,ocr
- ES6---数组的spread扩展运算符
- 瑞芯微(RKDocs)平台技术开发资料汇总(rk3188,rk3066,RK3128,rk3288)
- Stanford Parser使用
- 在线生成安卓签名证书
- 深度学习电脑配置推荐
- 豆瓣电影TOP250爬虫及可视化分析笔记
- 明明努力了却学不好Java_为什么我这么努力,还是得不到自己想要的结果???...
- 信息安全专业毕业设计选题推荐
- Python学习之列表--自动超市购物车
- 用opacity方法来隐藏元素后,照样可以触发绑定在其身上的点击事件
热门文章
- zerodivisionerror什么意思python-【转】为什么 Python 中的 True 等于 1
- python和c++哪个好找工作-少儿编程学python和C++哪个好
- python下载安装教程mac-数据分析入门~mac 下载及安装 Python 环境
- 简明python教程txt-Python:将 list 写入一个 txt 文件四种方法
- mysql新增json_MySQL5.7中新增的JSON类型的使用方法
- python unicode编码书写方式_python 中文编码 小结 ,json读写,str转换unicode,文字比较...
- Linux中的top命令查看内存和cpu信息
- 手动写个类似的Spring MVC框架试试
- 【读书笔记】iOS-属性
- WPF MVVM模式下的无阻塞刷新