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