尚硅谷最新版JavaScript基础全套教程完整版（p91-p109）

尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

一、DOM
1.什么是DOM
-DOM（全称为 Document Object Model 文档对象模型）
-JS可以通过DOM对HTML文档进行操作，这里的model模型指的就是HTML文档中对象之间的关系
2.节点(Node)
-节点是构成我们网页的基本单位
-常用节点分成四类: 文档节点(整个HTML网页）、元素节点(HTML文档中的HTML标签)、属性节点（元素的属性）、文本节点（HTML标签中的文本内容）
3.文档节点
-浏览器已经为我们提供了文档结点对象，这个对象是window对象，可以在网页中直接使用，它代表了整个网页
-document.getElementById(“元素ID名”); 通过document文档节点对象的getElementById方法，可以获取对象
-var btn = document.getElementById(“btn”) // 获取按钮对象
-btn.innerHTML =”111“; //修改按钮对象的属性（innnerHTML代表对象的内部HTML代码）

二、事件
1.事件的简介
-事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，是用户和浏览器之间的交互行为。
-JavaScript和HTML之间的交互是通过事件实现的。

2.处理事情的方式
-我们可以在事件对应的属性中设置一些JS代码，当事件被触发时，这些代码将会执行。
-如果把JS代码写在HTML代码中，那么我们称这种写法叫做结构和行为耦合，不方便维护，不推荐使用。
-可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用

3.文档的加载
-浏览器在加载页面时，是按照自下而上的顺序加载的，读到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载的话DOM对象也没有加载，会导致无法获取到DOM对象
-将js代码编写到页面下部就是为了可以在页面加载完毕以后再执行js代码。
-onload事件会在整个页面加载完成之后才触发，可以为window绑定一个onload事件，该事件对应的相应函数将会在页面加载完成之后执行。这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

三、DOM的方法
1.通过document对象调用，获取元素节点
-getElementById（） 通过id属性获取一个元素节点对象
-innerHTML这个属性可以获取元素内部的HTML代码，对于自结束标签这个属性没有意义
-getElementsByTagName（） 通过标签名获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 ，即使查询到的对象只有一个，也会封装到数组对象中返回。
-getElementsByName（）通过name属性获取一组元素节点对象，返回结果也是一个类数组对象。
2.获取元素节点对象的属性
-如果需要获取元素节点的属性，直接使用元素对象名.属性名。
-注意：class属性不能采用这种方式，读取class属性需要使用元素.className。

2.获取元素节点的子节点，通过具体的元素节点调用
-getElementsByTagName（）方法，返回当前节点的指定标签后代节点
-childNodes 属性 ，表示当前节点的所有子节点
这个属性会获取包括文本节点在内的所有节点，根据DOM标签，标签间的空白也会被当做节点。
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个元素而其他浏览器是9个。
-children属性 ，可以获取当前元素的所有子元素。
-firstChild 属性，表示当前节点的第一个子节点，包括空白文本节点
-firstElementChild获取当前元素的第一个子元素（但这个属性不兼容IE8及以下的浏览器，如果需要兼容尽量不要使用）
-lastChild属性 ，表示当前节点的最后一个子节点

3.获取父节点和兄弟节点
-通过具体的节点调用
-parentNode属性，表示当前节点的父节点
-previousSibling属性，表示当前节点的前一个兄弟节点，可能是空白节点
-previousElementSibling， 表示前一个兄弟元素节点，IE8及以下不兼容
-nextSibling属性，表示当前节点的后一个兄弟节点
-innerText属性 ， 这个属性可以获取到元素内部的文本内容，它和innerHTML类似，不同的是它会自动将HTML标签去除

四、Dom查询的其他方法
1.查询body标签
-var body = document.body; 或 var body =document.getElementsByTagName(“body”);
2.查询HTML根标签
-var html = document.documentElement;
3.all表示页面中所有元素
-var all =document.all;
-all =document.getElementsByTagName("*");
4.根据元素的class属性值查询一组元素节点对象
-var box1 =document.getElementsByClassName(“box1”);
-getElementsByClassName属性值可以根据class值查询一组元素节点对象，但是它不兼容IE8及以下的浏览器。
5.需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
-var div = document.querySelector(".box1");
-虽然IE8中不支持getElementsByClassName，但是可以支持querySelector方法，同样可以通过选择来找到对应的元素节点对象。
-使用该方法，总会返回唯一的一个元素，如果满足的元素有多个，那么它只会返回第一个
-querySelectorAll方法和querySelector方法类似，不同的是它会将符合条件的元素封装到一个数组中返回，即使符合条件的元素只有一个，也会返回数组。

五、Dom增删改方法
1.document.createElement()
-可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。
2.document.createTextNode()
-可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
3.appendChild（）
-向一个父节点中添加一个新的子节点
-用法：父节点.appendChild（子节点）；
4.insertBefore（）
-在指定的子节点前面插入新的子节点
-语法： 父节点.insertBefore(新节点，旧节点）
5.replaceChild()
-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild（新节点，旧节点）
6.removeChild（）
-可以删除一个子节点
-语法：父节点.removeChild(子节点);

子节点.parentNode.方法 就是 父节点.方法 (子节点.parentNode 等于 父节点）
7.使用innerHTML也可以完成DOM的增删改相关操作
-增加： 元素.innerHTML += “语句”
-一般我们会两种方式结合使用：
var li =document.createElement(“li”);
li.innerHTML +=“广州”;
city.appendChild(li);

8.return false 取消默认行为
-点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但此时我们不希望出现这个默认行为，可以通过在响应函数的最后returnfalse来取消默认行为

9.confirm（）
-用于弹出一个带有确认和取消按钮的提示框，需要一串字符串作为参数，这串字符串作为提示文字显示出来，如果用户点击确认，会返回true，如果点击取消会返回false。

六、a的索引问题
1.在for循环里设置了一个响应函数
-for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行
-当响应函数执行时，for循环早已执行完毕

七、使用DOM操作CSS
1.通过JS修改元素的样式
-语法： 元素.style.样式名 = 样式值（样式值需要是一个字符串）
注意：如果css的样式名中含有减号（-），这种名称在JS中是不合法的，比如background-color，需要将这种样式名修改为驼峰命名法，需要去掉减号，然后将-后的字母大写。
2.修改的内联样式
-我们通过style属性修改的样式属于内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即生效。
-但是如果在样式中写了！important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加！important。
3.读取元素的样式
-语法： 元素.style.样式名
-注意：通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

八、读取元素当前的样式
1.获取元素的当前显示的样式（currentStyle）
-语法：元素.currentStyle.样式名 它可以用来读取正在显示的样式
但是这个currentStyle只有IE浏览器支持，其他浏览器都不支持
-如果没有设置值，则会获取到默认值
2.getComputedStyle()
-在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式
-这个方法是window的方法，可以直接使用，需要两个参数
第一个参数：要获取样式的元素
第二个参数：可以传递一个伪元素，一般都传null
-该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名读取样式
-如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如没有设置width，不会获取auto，而是一个长度。
-但是这个方法不支持IE8及以下的浏览器
3.注意
-通过currentStyle和getComputeStyle（）读取到的样式不能修改，都是只读的