python_14(js)

默认横向平铺，水平平铺

当图片小于屏幕尺寸时：就会出现图片拆分的现象

如下：

解释：默认是水平和垂直都平铺，设置不平铺

代码：

输出

解释：固定背景图

代码：

输出：

解释：调整水平和垂直方向

输出:

解释：截取局部

代码

输出：

1.7.1 透明色

第2章 定位

n  静态定位position:static

n  相对定位position:relative

n  绝对定位podition:absolute;

n  固定定位position:fixed

解释：定位应用广泛，相对定位，绝对定位，及父相子绝的实际应用，贯通整个页面，如下：

小米的logo是固定定位，下面的菜单栏与上面的816是父相子绝的应用。

相对定位作用：做子绝父相对参考，做微调（以原来的位置做参考点）

例1）微调

输出：

例2）以原来位置为参考点做验证

代码：

.box{

width: 200px;

height: 200px;

background-color: red;

margin-top: 30px; è让盒子外边距留出30

position: relative;

top 30px è如果向下移动30 证明是已原来位置作参考，如果没动证明是以00点

}

输出

绝对定位解释：不压盖，脱离标准流

作用：做压盖现象

代码：

输出

添加绝对路径后box浮动，产生压盖

2.4.1 测试是否以原来位置为参考点

解释：单独设置绝对定位是以页面左上角的为起点的

代码：

输出：

2.4.2 添加滚动条

方法：

如果是嵌套盒子，是以最近的父辈盒子的左上角为参考点

代码：

输出：

2.5.1 验证是否以父辈盒子为对照点

解释：将第一个盒子设置向下移动40及向右移动30，此时左边距为50 ，如果以00点为对照点，那么box将左移20，如果以父盒子为参考点，将右移30

代码：

.box{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

top: 40px;

left: 30px;

}

输出：

解释：显示被覆盖的模块，用于调试用

解释：

选择鼠标指针浮动在其上的元素，并设置其样式：

2.7.1 定义和用法

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

2.7.2 例

1）为链接设置不同样式

请把鼠标指针移动到这些链接上。

这个链接改变颜色。

这个链接改变字体大小。

这个链接改变背景色。

这个链接改变字体。

这个链接会出现下划线。

2）为链接设置不同颜色

将鼠标指针移动到这个链接上：百度

3）为div设置悬浮颜色

1.引包

输出

https://www.bootcdn.cn/

1.引包

问题:导航区域固定住，下拉滚动条不变

2.10.1 解决方法z-index

解释：设置顶部栏的z-index

例：淘宝搜索框

第3章 Javascript

Web前端有三层：

l  HTML：从语义的角度，描述页面结构

l  CSS：从审美的角度，描述样式（美化页面）

l  JavaScript：从交互的角度，描述行为（提升用户体验）

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。

JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。

简单来说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。

var a ;

JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，就是服务于页面的交互效果、美化、绚丽、不能操作数据库

JavaScript基础分为三个部分：

n  ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

n  DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

n  BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。

JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动

第4章 js基本方法

引用方法：

书写样式：

index.js

var a = 1;

var b = '1';

console.log(a==b); //比较的是值

console.log(a===b); //值和数据类型

// var str = a+'';

// console.log(str);

// console.log(typeof str);

var str2 = a.toString();

console.log(typeof  str2);

解释：弹出警告框

（1）JavaScript对换行、缩进、空格不敏感。

备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

（2）所有的符号，都是英语的。比如括号、引号、分号。

（3）JavaScript的注释：

　单行注释：

// 我是注释

　　多行注释：　

/*

多行注释1

多行注释2

*/

备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。

解释：表示在控制台中输出。console表示“控制台”，log表示输出

控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确

解释：阻止a标签中默认事件

源码：

百度

如果将 javascripts:void(0)换成#号，点击后会回到顶部

解释：prompt()专门用来弹出能够让用户输入的对话框

prompt()语句中，用户不管输入什么内容，都是字符串

代码：

输出：

alert("从前有座山");                //直接使用，不需要变量

var a = prompt("请输入一个数字");   // 必须用一个变量，来接收用户输入的值

直接量：数字和字符串

“直接量”即常量，也称为“字面量”。看见什么，它就是什么。

简单的直接量有2种：数字、字符串。

（1）数值的直接量的表达非常简单，写上去就行了，不需要任何的符号。例如：

alert(886);  //886是数字，所以不需要加引号。

（2）字符串也很简单，但一定要加上引号。可以是单词、句子等。

var a = 100;

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，

定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。

变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。

变量名：我们可以给变量任意的取名字。

PS：在JavaScript中，永远都是用var来定义变量，这和C、Java等语言不同(有兴趣的同学可以看一下es6)

例：

变量要先定义，才能使用。比如，我们不设置变量，直接输出：

控制台将会报错：

正确写法：

var a;   // 定义

a = 100;  //赋值

console.log(a);  //输出100

有经验的程序员，会把定义和赋值写在一起：

var a = 100;    //定义，并且赋值100

console.log(a);  //输出100

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。

var A = 250;    //变量1

var a = 888;    //变量2

4.11.1 数值型：number

如果一个变量中，存放了数字，那么这个变量就是数值型的

var a = 100;            //定义了一个变量a，并且赋值100

console.log(typeof a);  //输出a变量的类型

4.11.2 typeof()

解释：表示“获取变量的类型”，语法为：

typeof 变量

在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

4.11.3 字符串型：string

var a = "abcde";

var b = "路飞";

var c = "123123";

var d = "哈哈哈哈哈";

var e = "";     //空字符串

console.log(typeof a);

console.log(typeof b);

console.log(typeof c);

console.log(typeof d);

console.log(typeof e);

4.11.4 连字符和加号的区别

键盘上的+可能是连字符，也可能是数字的加号。如下：

console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，连接在一起了

console.log("我+爱+你");           //原样输出

console.log(1+2+3);             //输出6

总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）

语句：

a = b;

把b的值赋给a，b不变。

将等号右边的值，赋给左边的变量；等号右边的变量，值不变。

举个特殊的例子：

var a = "3";

var b = 2;

console.log(a-b);

效果：（注意，字符串 - 数值 = 数值）

4.13.1 用户的输入

我们在上面的内容里讲过，prompt()就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都是字符串。

4.13.2 parseInt()：字符串转数字

parseInt()可以将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写）。例如：

字符串转数字的方法：

parseInt(“5”);

4.13.3 parseInt()还具有以下特性：

（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。

例如：

console.log(parseInt("2018你真帅！！");

（2）自动带有截断小数的功能：取整，不四舍五入。

var a = parseInt(5.8) + parseInt(4.7);

console.log(a);

var a = parseInt(5.8 + 4.7);

console.log(a);

第5章 数据类型

数据类型包括：基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。

当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

var a = 123;

//typeof 检查当前变量是什么数据类型

console.log(typeof a)

//特殊情况

var a1 = 5/0;

console.log(typeof e1) //Infinity 无限大. number类型

var str  = '123'

console.log(typeof str)

var b1 = false;

console.log(typeof b1)

var c1 = null;//空对象. object

console.log(c1)

var d1;

//表示变量未定义

console.log(typeof d1)

Function

Object

Arrray

String

Date

第6章 数学运算符

var name = '伊拉克';

var am = '美军';

// 字符串拼接

var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。"

var fullStr = str;

console.log(fullStr)

// 不能对字符串进行+运算 只能拼接

var a1 = '1';

var a2 = '2';

console.log(a1-a2) //12

var b1 = 'one';

var b2  = 'two';

// NaN. ==== not a number 是number类型

console.log(typeof(b1*b2))

第7章 数据类型转换

7.1.1 隐士转换

var n1 = 123;

var n2 = '123';

var n3 = n1+n2;

// 隐式转换

console.log(typeof n3);

// 强制类型转换String(),toString()

var str1 = String(n1);

console.log(typeof str1);

var num = 234;

console.log(num.toString())

var  stringNum = '789.123wadjhkd';

var num2 =  Number(stringNum);

console.log(num2)

// parseInt()可以解析一个字符串 并且返回一个整数

console.log(parseInt(stringNum))

console.log(parseFloat(stringNum));

var b1 = '123';

var b2 = 0;

var b3 = -123

var b4 = Infinity;

var b5 = NaN;

var b6; //undefined

var b7 = null;

// 非0既真

console.log(Boolean(b7))

第8章 流程控制

var ji  = 20;

if(ji >= 20){

console.log('恭喜你，吃鸡成功，大吉大利')

}

alert('alex');//下面的代码还会执行

var ji  = 20;

if(ji>=20){

console.log('恭喜你，吃鸡成功，大吉大利')

}else{

console.log('很遗憾 下次继续努力')

}

if (true) {

//执行操作

}else if(true){

//满足条件执行

}else if(true){

//满足条件执行

}else{

//满足条件执行

}

注意：浏览器解析代码的顺序 是从上往下执行，从左往右

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入

//逻辑与&& 两个条件都成立的时候 才成立

if(sum>400 && math>90){

console.log('清华大学录入成功')

}else{

alert('高考失利')

}

//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入

//逻辑或  只有有一个条件成立的时候 才成立

if(sum>500 || english>85){

alert('被复旦大学录入')

}else{

alert('高考又失利了')

}

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止

case 'good':

console.log('玩的很好')

//break表示退出

break;

case  'better':

console.log('玩的老牛逼了')

break;

case 'best':

console.log('恭喜你 吃鸡成功')

break;

default:

console.log('很遗憾')

}

1.初始化循环变量

2.判断循环条件

3.更新循环变量

var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件

console.log(i);

i = i+1; //更新循环条件

}

for(var i = 1;i<=10;i++){

console.log(i)

}

8.5.1 练习

for(var i = 1;i<=100;i++){

if(i%2==0){

//是偶数

console.log(i)

}

}

8.5.2 双重for循环

for(var i=1;i<=3;i++){

　　for(var j=0;j<6;j++){

document.write('*')

}

document.write('
')

}

练习：输出三角形

*

**

***

****

*****

******

for(var i=1;i<=6;i++){

for(var j=1;j<=i;j++){

　　document.write("*")；

}

document.write('
')；

}

在浏览器中输出

for(var i=1;i<=6;i++){ //行数

//控制我们的空格数

for(var s=i;s<6;s++){

document.write(' ')

}

for(var j=1;j<=2*i-1;j++){

document.write('*')

}

document.write('
')

}

第9章 常用内置对象

9.1.1 数组的创建方式

l  字面量方式创建（推荐大家使用这种方式，简单粗暴）

var colors = ['red','color','yellow'];

l  使用构造函数的方式创建 使用new关键词对构造函数进行创建对象

var arr = [];

//通过下标进行一一赋值

arr[0] = 123;

arr[1] = '哈哈哈';

arr[2] = '嘿嘿嘿'

9.1.2 数组的常用方式

9.1.3 数组的合并concat()

var north = ['北京','山东','天津'];

var south = ['东莞','深圳','上海'];

var newCity = north.concat(south);

console.log(newCity)

9.1.4 join()

解释：将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串

var score = [98,78,76,100,0];

var str = score.join('|');

console.log(str);//98|78|76|100|0

9.1.5 toString()

解释:将数组转换成字符串

var score = [98,78,76,100,0];

//toString() 直接转换为字符串  每个元素之间使用逗号隔开

var str = score.toString();

console.log(str);//98,78,76,100,0

9.1.6 slice(start,end);

解释：返回数组的一段，左闭右开

var arr = ['张三','李四','王文','赵六'];

var newArr  = arr.slice(1,3);

console.log(newArr);//["李四", "王文"]

9.1.7 pop

解释：移除数组的最后一个元素

var arr = ['张三','李四','王文','赵六'];

var newArr  = arr.pop();

console.log(newArr);//["张三", "李四"，"王文"]

9.1.8 push()

解释：向数组最后添加一个元素

var arr = ['张三','李四','王文','赵六'];

var newArr  = arr.push('小马哥');

console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]

9.1.9 reverse()

解释：翻转数组

var names = ['alex','xiaoma','tanhuang','angle'];

//4.反转数组

names.reverse();

console.log(names);

9.1.10 sort对数组排序

var names = ['alex','xiaoma','tanhuang','abngel'];

names.sort();

console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

9.1.11 判断是否为数组：isArray()

布尔类型值 = Array.isArray(被检测的值) ;

9.2.1 字符串方法：

9.2.2 chartAt()

解释：返回指定索引的位置的字符

var str = 'alex';

var charset = str.charAt(1);

console.log(charset);//l

9.2.3 concat

解释：返回字符串值，表示两个或多个字符串的拼接

var str1 = 'al';

var str2  = 'ex';

console.log(str1.concat(str2,str2));//alexex

9.2.4 replace(a,b)

解释：将字符串a替换成字符串b

var a = '1234567755';

var newStr = a.replace("4567","****");

console.log(newStr);//123****755

9.2.5 indexof()

解释：查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样

var str = 'alex';

console.log(str.indexOf('e'));//2

console.log(str.indexOf('p'));//-1

9.2.6 slice(start，end)

解释：左闭右开 分割字符串

var str = '小马哥';

console.log(str.slice(1,2));//马

9.2.7 split('a',1)

以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';

console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

9.2.8 substr(statr,end) 左闭右开

var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';

console.log(str.substr(0,4));//我的天呢

9.2.9 toLowerCase()转小写

var str = 'XIAOMAGE';

console.log(str.toLowerCase())；//xiaomage

9.2.10 toUpperCase()转大写

var str = 'xiaomage';

console.log(str.toUpperCase());

特别：

1.将number类型转换成字符串类型

var num = 132.32522;

var numStr = num.toString()

console.log(typeof numStr)

//四舍五入

var newNum = num.toFixed(2)

console.log(newNum)

解释：创建日期对象只有构造函数一种方式,使用new关键字

//创建了一个date对象

var myDate = new Date();

9.3.1 方法

//创建日期对象

var myDate=new Date();

//获取一个月中的某一天

console.log(myDate.getDate());

//返回本地时间

console.log(myDate().toLocalString());//2018/5/27 下午10:36:23

9.5.1 Math.ceil()

解释：向上取整，'天花板函数'

var x = 1.234;

//天花板函数  表示大于等于 x，并且与它最接近的整数是2

var a = Math.ceil(x);

console.log(a);//2

9.5.2 Math.floor 向下取整，'地板函数'

var x = 1.234;

// 小于等于 x，并且与它最接近的整数 1

var b = Math.floor(x);

console.log(b);//1

9.5.3 Math.max

解释：求两个数的最大值和最小值

//求 两个数的最大值 最小值

console.log(Math.max(2,5));//5

console.log(Math.min(2,5));//2

9.5.4 随机数 Math.random()

var ran = Math.random();

console.log(ran);[0,1)

第10章 函数

函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

n  将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。

n  简化编程，让编程模块化

例：

console.log("hello world");

sayHello();     //调用函数

//定义函数：

function sayHello(){

console.log("hello");

console.log("hello world");

}

function 函数名字(){

}

解释如下：

function：是一个关键字。中文是“函数”、“功能”。

函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。

参数：后面有一对小括号，里面是放参数用的。

大括号里面，是这个函数的语句

函数名字();

函数的参数包括形参和实参

注意：实际参数和形式参数的个数，要相同。

例子：

sum(3,4);

sum("3",4);

sum("Hello","World");

//函数：求和

function sum(a, b) {

console.log(a + b);

}

函数返回值：

console.log(sum(3, 4));

//函数：求和

function sum(a, b) {

return a + b;

}

第11章 伪数组 arguments

解释：arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。

（1）返回函数实参的个数：arguments.length

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

function fn(a,b,c) {

console.log(arguments);

console.log(fn.length);         //获取形参的个数

console.log(arguments.length);  //获取实参的个数

console.log("----------------");

}

输出

[2, 4]

24 3

25 2

27 ----------------

23 [2, 4, 6]

24 3

25 3

27 ----------------

23 [2, 4, 6, 8]

24 3

25 4

27 ----------------

（2）之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

function fn(a,b) {

arguments[0] = 99;  //将实参的第一个数改为99

arguments.push(8);  //此方法不通过，因为无法增加元素

}

var array = [1,2,3,4,5,6];

array.splice(0);      //方式1：删除数组中所有项目

array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读

array = [];           //方式3：推荐

var str = 'a';

console.log(str);

console.log(typeof str);

输出：

string

11.2.1 字符串加数字

var str = a+ '12';

console.log(str);

console.log(typeof str);

输出

12

11.2.2 not a number

var stringNum = '78914dfsasdfdfsd'；

var num2 = Number(stringNum);

console.log(typof num2);

输出：

not anumber

11.2.3 特殊情况

var c = 5/0

//true

console.log(Boolean(c));

//false

console.log(Boolean(num2));

11.2.4 先++后赋值

var a = 1;

var c = a++;

console.log(a);

//2

console.log(c);

//1

第12章 DOM事件操作

avaScript基础分为三个部分：

n  ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

n  DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

n  BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

n  事件源：引发后续事件的html标签。

n  事件：js已经定义好了（见下图）。

n  事件驱动程序：对样式和html的操作。也就是DOM。

（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

（3）书写事件驱动程序：关于DOM的操作

例：

获取事件源的常见方式如下：

n  var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

n  var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

n  var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

12.6.1 方式一：直接绑定匿名函数

12.6.2 方式二：先单独定义函数，再绑定

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值

12.6.3 方式三：行内绑定

我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式

上方代码的注意事项：

n  在js里写属性值时，要用引号

n  在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

当页面加载（文本和图片）完毕的时候，触发onload事件。

举例：

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性

上图可知，在HTML当中，一切都是节点：（非常重要）

n  元素节点：HMTL标签。

n  文本节点：标签中的文字（比如标签之间的空格、换行）

n  属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

n  找对象（元素节点）

n  设置元素的属性值

n  设置元素的样式

n  动态创建和删除元素

n  事件的触发响应：事件源、事件、事件的驱动程序

调用者就是节点。一个节点只有一个父节点，调用方式就是

（1）nextSibling：

指的是下一个节点（包括标签、空文档和换行节点）

火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

IE678版本：指下一个元素节点（标签）。

（2）nextElementSibling：

火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。

总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

previous的中文是: 前一个

（1）previousSibling：

火IE（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。

总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

补充：获得任意一个兄弟节点：

节点自己.parentNode.children[index];  //随意得到兄弟节点

（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。

火狐 谷歌等高本版会把换行也看做是子节点。（了解）

用法：

子节点数组 = 父节点.childNodes;   //获取所有节点。

（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

它只返回HTML节点，甚至不返回文本节点。

在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。

虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

用法：（用的最多）

子节点数组 = 父节点.children;   //获取所有节点。用的最多。

nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。

nodeType == 2 表示是属性节点 了解

nodeType == 3 是文本节点 了解

第13章 DOM节点操作

格式：

新的标签(元素节点) = document.createElement("标签名");

创建一个li标签，或者是创建一个不存在的adbc标签

插入节点有两种方式，它们的含义是不同的。

方式1：

父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

父节点.insertBefore(新的子节点,作为参考的子节点);

解释：

n  在参考节点前插入一个新的节点。

n  如果参考节点为null，那么他将在父节点最后插入一个子节点。

格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

格式如下：

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

n  不带参数/带参数false：只复制节点本身，不复制子节点。

n  带参数true：既复制节点本身，也复制其所有的子节点。

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例：

方式1：

元素节点.属性;

元素节点[属性];

举例：（获取节点的属性值）

方式2：

素节点.getAttribute("属性名称");

例子：

console.log(myNode.getAttribute("src"));

console.log(myNode.getAttribute("class"));   //注意是class，不是className

console.log(myNode.getAttribute("title"));

方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。

方式1举例：（设置节点的属性值）

myNode.src = "images/2.jpg"   //修改src的属性值

myNode.className = "image2-box";  //修改class的name

方式2：（推荐）

元素节点.setAttribute(属性名, 新的属性值);

方式2举例：（设置节点的属性值）

myNode.setAttribute("src","images/3.jpg");

myNode.setAttribute("class","image3-box");

myNode.setAttribute("id","你好");

格式：

元素节点.removeAttribute(属性名);

举例：（删除节点的属性）

myNode.removeAttribute("class");

myNode.removeAttribute("id");

补充：

innerHTML、innerText 、value