[JavaScript知识库]javascript世界后续

一。DOM

1.DOM作用

? ? ? ? 1. 获取文档内容并控制

? ? ? ? 2.设置标签属性

? ? ? ? 3.?设置标签样式

? ? ? ? 4.动态创建元素

2.获取元素

1.document.getElementById();

2.document.getElementsByTagName();

3.document.getElementsByClassName()；

4.document.querySelector();

5.document.querySelectorAll();

3.事件三要素

(1)?事件源?

(2)事件类型

(3)事件处理程序

4.鼠标事件

? ? ? ? ?onclick??????鼠标点击左键触发???mouse

?????????onmouseover??鼠标经过触发

? ? ? ? ?onmouseout???鼠标离开触发

?????????onmousemove??鼠标移动触发

?????????onmouseup????鼠标弹起触发

?????????onmousedown??鼠标按下触发

?????????onfocus??????聚焦时候触发

?????????onblur???????失焦时候触发

5.操作元素总总结

操作元素总结：分为4大类??

????????1.操作元素内容??????主要是包括??innerText??innerHTML

????????2.操作常见元素属性??主要是src?href?title?alt等等

????????3.操作表单元素属性??主要是type?value?disabled

????????4.操作元素样式属性??主要是?element.style???className

6.节点概述

? ??nodeType??1??元素节点

????nodeType??2???属性节点

????nodeType???3???文本节点

? ? ?父节点??node.parentNode???node节点的父节点???

? ? ?子节点.parentNode

?nextSibling?下一个兄弟节点 包含元素节点和文本节点

?previousSibling?上一个兄弟节点??包含元素节点和文本节点??

?nextElementSibling??下一个兄弟元素节点???只是元素节点

?previousElementSibling?上一个兄弟元素节点??只是元素节点

7.DOM重点

??1.?创建元素（标签）???

?????????document.write('')

?????????element.innerHTML

?????????document.createElement('')

?????????2.?增加插入元素(标签)

?????????parentNode.appendChild()

?????????parentNode.insertBefore(创建的元素,指定元素的前面)

?????????3.?删除元素

?????????parentNode.removeChild()

?????????4.?改

?????????主要修改dom的元素属性，dom元素的内容、属性,?表单的值等

?????????修改元素属性：?element.src、href、title等

?????????修改元素样式：?style、className

?????????修改元素内容：?element.innerHTML?、innerText

?????????修改表单元素：?value、type、disabled等

?

?????????5.?查

?????????主要获取查询dom的元素

?????????DOM提供的API?方法：?getElementById、getElementsByTagName?古老用法?不太推荐

?????????H5提供的新方法：getElementsByClassName?querySelector、querySelectorAll?提倡

?????????利用节点操作获取元素：?父(parentNode)、子(children)、

?????????兄(previousElementSibling、?nextElementSibling)?提倡

?????????6.?属性操作

?????????主要针对于自定义属性.

?????????setAttribute：设置dom的属性值

?????????getAttribute('属性值')：得到dom的属性值

?????????removeAttribute移除属性

?????????7.?事件操作

?????????给元素注册事件，?采取事件三要素?事件源.事件类型?=?事件处理程序

?????????鼠标事件?触发条件

二。BOM

即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是?window。

1.DOM与BOM的区?

?????????DOM

?????????文档对象模型

?????????DOM就是把[文档]?当做[对象]来看待

?????????DOM的顶级对象是document

?????????DOM主要学习的是操作页面元素

?????????DOM是W3C标准规定

?????????BOM

?????????浏览器对象模型

?????????把[浏览器]当做一个[对象]来看待

?????????BOM的顶级对象是window

?????????BOM学习的是浏览器窗口交互的一些对象

?????????BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2.setTimeout定时器

? ? ??

例

   var time1 = setTimeout(function() {
            console.log('吉时已到');

        }, 2000);

3.清除定时器

?clearTimeout清除定时器???window.clearTimeout(定时器名字)

4。this指向问题

this指向问题??一般情况下，this指向调用他们那个对象

?1.在全局作用域下??this指向谁???window

2.普通函数里面this指向谁???????window?

3.定时器里面的this指向谁???window

4.对象的方法里面的this指向谁??指向这个对象ldh

5.给指定元素绑定事件，this指向事件绑定者??btn