DOM-操作网页

1.DOM简介       dom提供了一组对象，通过这组对象可以通过js去操作网页

2.document对象 

        document对象代表整个网页

        document对象有原型链,自己没有的方法,看原型链上祖先元素有没有,一层一层的往上找

HTMLDocument -> Document -> Node -> EventTarget -> Object.prototype -> null

        document的部分属性

                element 是元素的意思

                document.documentElement :html根属性

                document.head head属性

                document.body body属性

                document.title title属性

                document.links 获取页面所有超链接

3.元素节点对象(element)

        元素节点对象:在网页中,每一个标签都是一个元素节点

        获取元素节点

                1.通过document对象来获取

                2.通过document对象来创建

                3.通过元素节点对象来获取其他元素节点对象

1.通过document获取元素节点的方法
document.getElementById()	通过id获取一个元素节点对象
document.getElementsByClassName()	通过class属性获取一组元素节点对象  返回的是一个类数组对象 结果实时更新,在网页中新添加元素时,结果也会实时更新
document.getElementsByTagName()	通过标签名获取一组元素节点对象 返回一个集合 实时更新    document.getElementsByTagName()[' * ' ]获取所有属性 document.getElementsByTagName()[0]获取第一个有这个属性的节点
document.getElementsByName()	根据name属性获取一组元素节点对象 返回一个集合 实时更新 针对表单使用(一般只有表单才有name)
document.querySelectorAll()	根据选择器在页面中查询元素 返回一个类数组(不会实时更新)
document.querySelector()	根据选择器在页面中查询第一个元素

总结 名字很长，根据特点记（要id,就get element+ by id），get直接得到 query 查询得到，要id就元素节点的id(元素节点和节点有区别) element+id，要类名class ,classname,要标签名 tagname(tag:标签) ，有s返回伪数组，没s返回一个元素节点，特别记得 queryselect 和queryselectAll就好，queryselect不会实时更新，其他有s的都会

2.通过document创建一个元素节点
document .createElement()	根据标签名创建一个元素节点对象

        1和3的区别，在于范围的不同，一个是在document整个文档，一个是特定的元素

      document.getElementById()  p.getElementById()

3.通过元素节点对象来获取其他元素节点对象的属性
元素名.childNodes	获取当前元素的子节点(会包含空白的子节点) 不实用
元素名.children	获取当前元素的子元素(也会算上换行 空白等) 不实用
元素名.firstElementChild	获取当前元素的第一个子元素
元素名.lastElementChild	获取当前元素的最后一个子元素
元素名.nextviousELementSibling	获取当前元素的下一个兄弟元素
元素名.previousELementSibling	获取当前元素的前一个兄弟元素
元素名.  parentNode	获取当前元素的父节点

        节点包括 文字节点(换行就是空白,空白属于文字节点)  注释,所以写获取节点元素（是属性） 元素名.firstElementChild

  4.文档节点     

        文件节点简介：在DOM中，网页中所有的文本内容都是文本节点对象，可以通过元素来获取其中的文本节点对象，但是我们不这样做，而是直接通过元素去修改文本

        修改文本的三个属性

                -元素名.textContent

                -元素名.innerText

                -元素名.innerHTML

        区别 :innerHTML可直接向元素添加html代码

                textContent和innerText都只会获取内容,textContent不考虑css样式,innerText考虑

5.属性节点(Attr)

        简介:在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作

         操作属性节点的方式

                方式1:

                        -读取 元素.属性名

                                        注意，cLass属性需要使用className来读取,不推荐这样去获取class值

                                        注意,读取一个布尔值(如disable)时，会返回true或false                    

                        -修改 元素.属性名 = 属性值      

                方式2:

                        -通过方法修改

                              -读取 元素.getAttribute(属性名)

                               -修改    元素.setAttribute(属性名,属性值)

                                        注: 对于布尔值的修改,建议设置成 和属性名一样,因为后面的值对前面没影响,是啥不重要

                                -删除    元素.setAttribute(属性名)

6.事件

        事件:用户和页面之间发生的交互行为(如点击,鼠标移动等)

        通过为事件绑定响应函数(回调函数),完成和用户之间的交互

        绑定响应函数的方式

                1.直接在元素的属性中设置

                        -例 <button value="确认" οnclick="alert('hhh')">确认</button>   

                2.通过为元素的指定属性设置回调函数的形式绑定事件(一个事件只能绑定一个响应函数)

                        元素.οnclick=function( )  {  alert (1) }

                3.元素.addEventListener("触发事件名称"， function(){aLert("哈哈哈") }

7.dom的修改

            添加元素

                    父元素.appendChild(子元素) 给一个节点添加子节点

                    父元素.insertAdjacentElement("参数1",参数2) 向元素的任意位置添加元素

                    父元素.insertAdjacentHTML("参数1"，"<li id='bgj'>白骨精</li>")  直接写属性

                        -2个参数

                            1.要添加的位置

                                beforeend标签最后 afterbegin 标签的开始

                               beforebegin 在元素的前边插入元素 (兄弟元素)

                               afterend 在元素的后边插入元素(兄弟元素)

                         2.要添加的元素

        替换元素 原来的元素.replaceWith(要替换的元素)

        删除当前元素 元素.remove()  

8.节点的复制

       节点复制方法     元素.cloneNode()

                -会复制节点所有特点,包括属性,所以会导致 id重复(复制也是复制自身的,不会复制子节点的)

                -只复制当前节点,不复制节点的子节点(浅复制)

                -在括号内写 true时,会复制子节点

                

            

9.深浅复制

10.修改css样式

             不用 元素.style =xx 这样修改,这样是往元素中添加一个内联样式去进行修改,可以通过添加删除 class 来进行修改

元素.classList	.add()	添加一个或多个class
	.remove()	删除一个或多个class
	.toggle()	切换一个class(有就删,没有就增)
	.replace()	替换 (旧值, 新值)
	.contains	检查是否有class 有true 没有 false

11.读取css样式

        1.getComputedStyle(参数1,参数2)

                -返回一个对象,包含的当前元素所有有效样式

                -参数 1.要获取样式的对象 2.要获取的伪元素 :

        注:会有元素的单元的问题,在计算时要 去掉单位,在使用时,设置时 加上单位

                去掉单位的一个方法 parseInt 取整方法

       2.通过属性读取

       

                            

只读	元素.clineHeight	获取 内容区+内边距的     高度
	.clineWidth	内容区+内边距的     宽度
	.offsetHeight	内容区+内边距的+边框 高度
	.offsetWidth	内容区+内边距的+边框 宽度
	.scrollHeight	滑动区域 高度(出现滚动条时)
	.scrollWidth	滑动区域 宽度(出现滚动条时)
	.offsetParent	获取元素的定位父元素,没有开启定位时,返回 body
	.offsetTop	元素相对于其定位父元素的偏移量
	.offsetLeft
可变	.scrollTop	滚动条的偏移量(横竖滚动条的位置)
	.scrollLeft

12. 事件 event

        事件对象,通过事件对象event可以获取对象的详细信息

        

属性
event.target	表示触发事件的对象
event.stopPropagation	停止事件冒泡
event.preventDefault	取消默认行为=>如 a链接的跳转

       在事件的响应中不用this,因为this 表示绑定事件的对象  event.target表示触发事件的对象 

        因为事件冒泡,事件绑定的对象可以由别的对象来触发

13.事件冒泡

           事件冒泡:事件的向上转导

            当元素的某个事件被触发后,其祖先元素上的相同事件也会同时被触发

              事件冒泡和元素的样式无关,只和元素的结构相关

14.事件委派

        委派:是本该绑定多个元素的事件，绑定给其祖先元素,例如 给document绑定事件,然后在执行代码前,先判断事件是由谁触发即可         元素.includes(xx)  检查元素内是否包含xx

15.事件捕获

        事件的传播机制，分为3个阶段：

                -1.捕获阶段（由事祖先元素向目标元素进行事件的捕获）（默认情况下）

        

从外往里是捕获，从里往外是冒泡