JS操作DOM及CSS

 JS创造于1994年，其目的是为浏览器显示的文档赋予动态行为。

1 Web编程基础

本节讲解如何编写Web应用中的js程序，如果将这些程序加载到浏览器，以及如何获取输入、产出输出，如何运行响应事件的异步代码。

1.1 js 脚本

虽然现在不再提倡使用document.write()生成内容了，但由于还存在这种可能，浏览器在解析遇到

1.2 JS 程序的执行

图 js 程序从脚本执行阶段过度到事件处理阶段到步骤

1.3 程序错误

1）window.onerror属性，能定义一个终极错误处理程序，在未捕获异常时调用。当未捕获异常沿调用栈一路向上传播，错误消息即将现身在开发者控制台时，window.onerror函数将会以三个参数被调用（描述错误的消息，包含导致错误的js代码的url，文档中发生错误的行号）。 如果onerror处理程序返回true,意味着通知浏览器它已经处理了错误，不需要进一步行动了。

   
   


制造错误

2）window.addEventListener() 为 “unhandlerejection（期约被拒绝而没有catch()函数处理它）”事件注册一个处理程序来发现它。这个函数第一个参数是一个promise对象，第二个参数是reason，其值为本来要传给.catch()函数的拒绝理由。

   
   


制造错误

2 事件

图 事件传播的三个阶段

第一个阶段也叫做“捕获”阶段。addEventListener()接收的第三个可选参数，如果该值是true或{capture: true}，那么就表明该事件处理程序会注册为捕获事件处理程序。

捕获阶段差不多与冒泡阶段正好相反：最先调用Window对象上注册的捕获处理程序，然后才调用Document对象的捕获处理程序，接着才是元素，然后沿着DOM树一直向下，直到事件目标父元素的捕获事件处理程序被调用。注册在事件目标本身的捕获事件处理程序不会在这个阶段被调用。

事件捕获提供了把事件发送到目标之前先行处理到机会。

2.1 事件取消

调用事件对象的preventDefault()方法可以阻止浏览器执行其默认的动作（如果注册程序程序时传入了passive选项，则会导致该方法失效）。

事件对象的stopPropagation()方法会取消事件传播，但同一对象上的其他事件处理程序会照常执行。

stopImmediatePropagation()方法会阻止同一个对象上注册的后续事件处理程序执行。

2.2 派发自定义事件

CustomEvent()构造函数创建自定义事件对象，第一个参数是表示事件类型的字符串；第二个参数是一个对象，用于指定事件对象的属性。配置参数（{bubbles: true} 表示希望其沿着文档树向上冒泡）。

事件目标的dispatchEvent()方法用于派发自定义事件，其唯一参数是CustomEvent类型对象，

   
   

    dispatchEvent

图 btn的sayHello事件对象

3 操作DOM

Element对象的querySelector()方法接收一个css选择符作为参数，返回它在文档中找到的第一个匹配的元素。

querySelectorAll()方法返回Element对象的后代及其本身所有匹配的元素。

closest()从当前元素开始，沿着DOM树向上匹配（而上面的方法是沿着DOM树向下匹配）。

   
   

    12
    34
   

56

aa

bb

3.1 元素的内容

元素的内容有HTML表示和纯文本表示。Element的textContent表示元素的纯文本内容。html表示有以下方法：

1）innerHTML属性。通常效率很高，不过要注意，通过+=操作符给innerHTML追加文本的效率不高（这个操作既会涉及序列化操作，也会涉及解析操作：先把元素内容转换为字符串，然后再把新字符串转换回元素内容）。返回值不包含元素自身。设置innerHTML属性时，新内容会替换当前元素的内容。

2）outerHTML属性，返回值包含元素自身。在设置outerHTML时，新内容会取代元素本身。

3）insertAdjacentHTML()方法，用于插入与指定元素“相邻”的任意HTML标记字符串，要插入的标签作为第二个参数传入，而第一个枚举参数用于指定其位置（beforebegin、afterbegin、beforeend、afterend）。

图 inserAdjacentHTML()方法的插入位置

   
   

innerHTML插入div1

outerHTML插入div2

insertAdjacentHTML插入div3

div1

div2

div3

图 依次点击一次btn后的界面

4 操作CSS

Element对象的classList属性表示元素的类集。可以通过其add或者remove方法为该元素添加或者删除类名。

样式表是通过