尚硅谷最新版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()读取到的样式不能修改,都是只读的