JS操作DOM（简洁易懂）

什么是DOM？
DOM（Document Object Model）文档对象模型。DOM为HTML提供了结构化表示方法，定义了访问和处理文档结构的方法规范。
HTML可以理解为是由DOM节点构成的集合，主要由元素节点、文本节点、属性节点三部分构成。

获取
通过ID获取（getElementById）
通过类名（getElementsByClassName）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过选择器获取一个元素（querySelector） document.querySelector(’.animated’)
通过选择器获取一组元素（querySelectorAll）document.querySelectorAll(’.animated’)
获取元素位置
属性             描述
offsetLeft    返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop    返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight    返回元素的高度
offsetWidth    返回元素的宽度
offsetParent    返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop    返回匹配元素的滚动条的垂直位置
scrollLeft    返回匹配元素的滚动条的水平位置
clientWidth    返回元素的可见宽度
clientHeight    返回元素的可见高度
|

固定对象获取：

固定对象获取换而言之，就是对HTML页面及其中的页面结构进行获取。

    console.log(document.body);//对HTML中的body进行获取
    
    console.log(document.head);//对html中的head进行获取
    
    console.log(document.title);//对html中的title进行获取
    
    console.log(document.documentElement);//获取整个HTML

获取DOM
操作
增删改查

创建元素节点 ：document.createElement(“div”);
removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。

鼠标事件
onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfocus :获得焦点时触发 ,事件用于：input标签type为text、password; textarea;
onblur :失去焦点时触发
onchange：域的内容改变时发生，一般作用于select或checkbox或radio
onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。
onmousedown : 鼠标按钮在元素上按下时触发.
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发

键盘事件
onkeydown(键盘按下)
onkeyup(键盘抬起)
onkeypress(按键事件)
表单事件
onfocus(获得焦点)
onblur（失去焦点）
浏览器事件
window事件 ：

onload（加载完成事件）
onerror（报错事件）
onresize :当调整浏览器窗口的大小时触发
onscroll :(滑动事件)拖动滚动条滚动时触发
移动端事件
touch（触屏）
touchstart （开始触屏 ）
touchmove（触屏移动）
touchend(触屏结束)

=======================================================================

一 前言
js中的DOM指的是“Document Object Model”，也就是文档对象模型的意思，是HTML和XML文档的编程接口；它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

二 什么是DOM
任意的文档都可以绘制成树状结构，在DOM树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。

docunment就是一个对象，这个对象指代的是这个文档

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

三 DOM元素方法列表

四 认识JavaScript中的DOM接口：
(常用方法)
获取节点：
document.getElementById(idName) //通过id号来获取元素，返回一个元素对象
document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有
document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组
document.qurySelectorAll(‘选择器’) // 通过选择器获取一组元素
document.querySelector(“选择器”) // 通过选择器获取单个元素

获取/设置元素的属性值：
element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值
element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

创建节点Node：
document.createElement(“h3”) //创建一个html元素，这里以创建h3元素为例
document.createTextNode(String) //创建一个文本节点
document.createDocumentFragment() //创建一个DOM片段

添加、移除、替换、插入（父元素调用）
element.appendChild() //添加
element.removeChild() //移除
element.replaceChild() //替换
element.insertBefore() //插入

(常用属性)
获取当前元素的父节点 ：
element.parentNode //返回当前元素的父节点对象

获取当前元素的子节点：
element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes //返回当前元素所有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild //返回当前元素的第一个子节点对象
element.lastChild //返回当前元素的最后一个子节点对象

获取当前元素的同级元素：
element.nextElementSibling //返回当前元素的下一个同级元素 没有就返回null
element.previousElementSibling //返回当前元素上一个同级元素 没有就返回null

获取当前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代码
element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

获取当前节点的节点类型：
node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点

设置样式：
element.style.color=“#eea” //设置元素的样式时使用style，这里以设置文字颜色为例

总结：
大家都会觉得用jQuery来操作dom会更加的方便且好用，因为jq对js的dom进行了封装，使得我们Write Less, Do More。但是我觉得还是要总结一下原生js的dom，从根本上了解js对dom的操作，只会有利而无害。

五 查找DOM节点
1.通过id获取

     <div id=”set”></div>
        <script>
            let setObj = document.getElementById(“set”);
            console.log(setObj)
        </script>

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2.通过class获取

        <div class=”box”></div>
        <div class=”box”></div>
        <script>
            var boxObj= document.getElementsByClassName(“box”);
            console.log(boxObj)
            //该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，
            //然后再为元素绑定事件。
        </script>

3.通过标签名获取

       <div>
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
            <p>段落5</p>
            <p>段落6</p>
        </div>
        <script>
            var p = document.getElementsByTagName(“p”);
            console.log(p)
            //注意: 该方法返回的也是一个集合。
        </script>
 

4. 通过name属性获取

<form>
            <input type=”text” name=”get” id=”” value=”” />
        </form>
        <script type=”text/javascript”>
            var get = document.getElementsByName(“get”)
            console.log(get)
            //注意：只有含有name属性的元素(表单元素)才能通过name属性获取
        </script>
 

5.通过querySelector获取

<div id=”ret”></div>
        <script>
            var ret = document.querySelector(“#ret”);
            console.log(ret)
        </script>

注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身。

6. 通过querySelectorAll获取

<div id=”ret”></div>
        <div id=”ret”></div>
        <div id=”ret”></div>
        <div id=”ret”></div>
        <div id=”ret”></div>
        <div id=”ret”></div>
        <script>
            var ret = document.querySelectorAll(“#ret”);
            console.log(ret)
        </script>

两个方法使用差不多的语法，都是接受一个字符串参数，该参数需要是合法的CSS选择语法。querySelector()方法仅仅返回匹配指定选择器的第一个元素，如果需要返回所有的元素，使用querySelectorAll()方法替代。

六 获取元素内容

<ul>
            <li>段落1</li>
            <li>段落2</li>
            <li>段落3</li>
            <li>段落4</li>
            <li>段落5</li>
        </ul>
        <script>
            var ret = document.querySelectorAll(“li”);
            for(var i=0; i<ret.length;i++){
                console.log(ret[i].innerHTML)
            }
        </script>

七 修改设置元素的内容
<ul>
            <li>段落1</li>
            <li>段落2</li>
            <li>段落3</li>
            <li>段落4</li>
            <li>段落5</li>
        </ul>
        <script>
            var ret = document.querySelectorAll(“li”);
            for(var i=0; i<ret.length;i++){
                ret[0].innerHTML=”改变后的段落1″
                ret[1].innerHTML=”改变后的段落2″
                ret[2].innerHTML=”改变后的段落3″
                ret[3].innerHTML=”改变后的段落4″
                ret[4].innerHTML=”改变后的段落5″
                console.log(ret[i].innerHTML)
            }
        </script>

八 获取元素的行内样式
<div id=”box” style=”height: 50px; margin-left: 100px;”>
            今天是星期二
        </div>
        <script>
            var box = document.getElementById(“box”)
            console.log(box.style.height)
            console.log(box.style.marginLeft)
        </script>
九 设置元素的行内样式
<div id=”box”>
            今天是星期二
        </div>
        <script>
            var box = document.getElementById(“box”)
            box.style.backgroundColor=”greenyellow”
            box.style.width=”100px”
            box.style.color=”white”
        </script>

十设置元素的类名
<div id=”city”></div>
        <script>
            var city = document.querySelector(“#city”)
            city.classList.add(“show”) //show
            // city.className=”box” //box
        </script>