JavaScript DOM编程艺术 - 读书笔记

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM编程艺术 - 读书笔记相关的知识，希望对你有一定的参考价值。

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的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面