尚硅⾕最新版JavaScript基础全套教程完整版（p91-p109）
⼀、DOM
1.什么是DOM
-DOM（全称为 Document Object Model ⽂档对象模型）
-JS可以通过DOM对HTML⽂档进⾏操作，这⾥的model模型指的就是HTML⽂档中对象之间的关系
2.节点(Node)
-节点是构成我们⽹页的基本单位
-常⽤节点分成四类: ⽂档节点(整个HTML⽹页）、元素节点(HTML⽂档中的HTML标签)、属性节点（元素的属性）、⽂本节点（HTML标签中的⽂本内容）
3.⽂档节点
-浏览器已经为我们提供了⽂档结点对象，这个对象是window对象，可以在⽹页中直接使⽤，它代表了整个⽹页
-ElementById(“元素ID名”); 通过document⽂档节点对象的getElementById⽅法，可以获取对象
list style position inside-var btn = ElementById(“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 =ElementsByTagName(“body”);
2.查询HTML根标签
-var html = document.documentElement;
3.all表⽰页⾯中所有元素
-var all =document.all;
-all =ElementsByTagName("*");
4.根据元素的class属性值查询⼀组元素节点对象
-var box1 =ElementsByClassName(“box1”);
-getElementsByClassName属性值可以根据class值查询⼀组元素节点对象，但是它不兼容IE8及以下的浏览器。
5.需要⼀个选择器的字符串作为参数，可以根据⼀个CSS选择器来查询⼀个元素节点对象帝国cms关键词和tag同步后怎么更新
-var div = document.querySelector(".box1");
-虽然IE8中不⽀持getElementsByClassName，但是可以⽀持querySelector⽅法，同样可以通过选择来到对应的元素节点对象。
-使⽤该⽅法，总会返回唯⼀的⼀个元素，如果满⾜的元素有多个，那么它只会返回第⼀个
-querySelectorAll⽅法和querySelector⽅法类似，不同的是它会将符合条件的元素封装到⼀个数组中返回，即使符合条件的元素只有⼀个，也会返回数组。
html个人网页完整代码顺序
五、Dom增删改⽅法
ateElement()
-
可以⽤于创建⼀个元素节点对象，它需要⼀个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。
ateTextNode()
-可以⽤来创建⼀个⽂本节点对象，需要⼀个⽂本内容作为参数，将会根据该内容创建⽂本节点，并将新的节点返回
3.appendChild（）
-向⼀个⽗节点中添加⼀个新的⼦节点
-⽤法：⽗节点.appendChild（⼦节点）；
4.insertBefore（）
-在指定的⼦节点前⾯插⼊新的⼦节点
-语法： ⽗节点.insertBefore(新节点，旧节点）
-可以使⽤指定的⼦节点替换已有的⼦节点
-语法：⽗节点.replaceChild（新节点，旧节点）
-可以删除⼀个⼦节点
stretch怎么记忆-语法：⽗节点.removeChild(⼦节点);
⼦节点.parentNode.⽅法 就是 ⽗节点.⽅法 (⼦节点.parentNode 等于 ⽗节点）
7.使⽤innerHTML也可以完成DOM的增删改相关操作
-增加： 元素.innerHTML += “语句”
-⼀般我们会两种⽅式结合使⽤：
var li =ateElement(“li”);
li.innerHTML +=“⼴州”;
city.appendChild(li);
-点击超链接以后，超链接会跳转页⾯，这个是超链接的默认⾏为，但此时我们不希望出现这个默认⾏为，可以通过在响应函数的最后returnfalse来取消默认⾏为
-⽤于弹出⼀个带有确认和取消按钮的提⽰框，需要⼀串字符串作为参数，这串字符串作为提⽰⽂字显⽰出来，如果⽤户点击确认，会返回true，如果点击取消会返回false。
六、a的索引问题div css模板源码
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浏览器⽀持，其他浏览器都不⽀持
-如果没有设置值，则会获取到默认值
-在其他浏览器中可以使⽤getComputedStyle()这个⽅法来获取元素当前的样式
-这个⽅法是window的⽅法，可以直接使⽤，需要两个参数
第⼀个参数：要获取样式的元素
第⼆个参数：可以传递⼀个伪元素，⼀般都传null
-该⽅法会返回⼀个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名读取样式
-
如果获取的样式没有设置，则会获取到真实的值，⽽不是默认值，⽐如没有设置width，不会获取auto，⽽是⼀个长度。
-但是这个⽅法不⽀持IE8及以下的浏览器
css的display属性blockflex
3.注意
-通过currentStyle和getComputeStyle（）读取到的样式不能修改，都是只读的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。