单词小记

document    文档
element     元素
node        节点
tag         标签
query       查询
toggle      切换 
Atrribute   属性

1.Dom简介

文档对象模型（document Object Model），通过Dom接口，用于改变网页的内容，结构和样式。

2.Dom树

文档：一个页面就是一个文档，Dom中用document表示（Dom顶层）
节点：网页中所有内容
    标签节点：每个标签就是一个元素点，操作他从而操作整个页面，用element表示
    属性节点：html的属性
    文本节点：html的内容文本

3.获取元素

1.根据id获取（id名）
    (得到元素从id中)  返回元素对象
    document.getElementById('id')；
2.根据标签名获取（标签名）
    (得到元素们从标签名字中)  返回元素对象集合(这个集合是伪数组)
    document.getElementsByTagName('标签名')[]
    获取具体元素通过[元素索引]
3.根据类名返回元素集合（class名）
    (得到元素们从类名中)   返回同2.标签
    document.getElementsByClassName('类名')[]
4.根据选择器返回全部或者第一个元素对象（#id/.class(class类名)/div(标签)）
    (查询选择器全部)   返回的是元素对象集合
    document.querySelectorAll("加符号的选择器(三种)")
    (查询选择器)    返回的是第一个元素对象
    document.querySelector("加符号的选择器")
5.其他特殊
    获取body元素
        document.body
    获取html元素
        document.documentElement

4.事件基础

事件是可以被JS侦测到的行为

4.1 事件三要素及执行步骤

 事件源： 触发事件的元素（也就是获取元素）
 事件类型： 例如点击事件
 事件元素做什么： 事件触发之后要执行的函数
 执行步骤：
     获取事件源--》注册事件--》添加事件处理函数

4.2 鼠标事件

 onchange        当控件内容发生改变时触发（常用于表单）
 onclick         左键点击触发
 ondblclick      左键双击触发
 onmousedown     鼠标按下触发
 onmouseup       鼠标抬起触发
 
 onmouseover     鼠标移入触发
 onmouseout      鼠标移出触发
 onmouseenter    移入(类似mouseover)，但不冒泡
 onmouseleave    移出(类似mouseout)，但不冒泡
 
 onmousemove     鼠标移动触发
 onfocus         获取鼠标焦点触发（输入框）
 onblur          失去鼠标焦点触发
 onload          预加载（加载等待，页面加载完再操作）
 例：
     //将js代码预加载，可以写在页面比较上方，不影响代码运行
      <script>
            onload = function () {}
      </script>
 onscroll        滚动条事件
 例：
     //获取滚动条距离文档顶部的偏移量
      window.addEventListener("scroll",function(){
          console.log(document.documentElement.scrollTop);
})
 例：
     //获取事件源
     var box=document.querySelector(".box")
     //注册时间并添加事件处理函数
     box.onmouseover=function(){
        console.log("移入");
     }

5.操作元素

5.1 操作元素内容（文本）

 element.innerText  以纯文本解析元素（显示出来如<h1>等各种标签） 
 element.innerHTML  他是以HTML形式解析元素
 例：
      <div class="box">12345</div>
      //获取事件源（也就是哪个元素）
      var box=document.querySelector(".box")
      //操作元素内容
      box.innerText="<h1>panpan</h1>"//12345--》<h1>panpan</h1>
      box.innerHTML="<h1>panpan</h1>"//12345--》h1标签的panpan

5.2 操作元素属性（属性名）

src,href,style,alt,title
先获取事件源
获取属性值：元素.属性名
改变属性值：元素.属性名="新值"

5.3 操作表单元素（）

type(输入框类型),value(输入框默认值),checked(默认选中状态),
selected(下拉列表默认选中),disabled(禁用状态)

5.4 操作样式（class选择器名）

操作行内样式
    element.style(直接style中的css样式)
通过class类名操作
    element.className
通过class类名操作
    elememnt.classList
                .add(新增class名)(多个)
                .remove(删除class名)
                .toggle(有就删除，没有就添加，只能操作一个class)

5.5 自定义属性（用于连接两个没有联系的列表）

获取属性
    element.getAttribute("属性")
设置属性
    element.setAttribute('属性','值')
移除属性
    element.removeAttribute('属性')