第九周DOM 节点 元素操作 冒泡事件 鼠/键/表/win事件

文档对象

        document 表示一整个文档

        console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。

        console.dir()可以显示一个对象所有的属性和方法。

        window.onload在第一阶段只是将处理函数地址赋值给onload属性，并没有执行函数，当页面全部加载完毕之后，立即执行window.onload

节点

        文本节点

                1.包括换行        2.标签中文字部分

        元素节点

                1.标签，每一个标签称为一个元素        2.一个标签一个对象

                3.单标签没有文本节点和子元素

        属性节点

                标签属性

               dom节点

        Elements:元素对象集合        Element:单个元素对象

        HTMLcollection:html元素集合的构造器

        NodeList：节点列表构造器，由foreach

        NodeList 是一个静态对象，从捕获到这个对象开始，里面的元素就是固定不变的。
        HTMLCollection 是一个动态集合，里面的元素是动态变化的。

在js中获取html中的节点

        document.getElementById('元素id') ：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。返回对象

        getElementsByClassName('元素class') 通过类名，方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

        document.getElementsByName('属性值') ：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组（类数组）。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点

        document.getElementsByTagName('标签名') ：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。

        document.documentElement         获取html的方法

        document.body          获取body的方法    

        querySelector          通过选择器获取一个元素   

        querySelectorAll        通过选择器获取一组元素

元素对象的属性操作

            获取父元素，parentNode 是 W3C 标准

            var parent = document.querySelector('.list').parentNode;

    

            获取父元素，parentElement 是 IE 的标准

            var paernt = document.querySelector('.list').parentElemetChild;

            var Chlid = document.querySelector('.list').children[0];

            console.log(Chlid); //获取子元素

           

            var Chlid = document.querySelector('.list').childNodes[0];

            console.log(Chlid); //获取子节点

            //firstChild,lastChild 空格、换行也会当成字节点，所以可能会现 undefined

            var firstchild = document.querySelector('.list').firstChild;

            console.log(firstchild);//firstChild获取第一个节点

            var lastchild = document.querySelector('.list').lastChild;

            console.log(lastchild);//lastchild获取最后一个节点

 

            //firstElementChild,lastElementChild 不匹配空格、换行

            var firstchild = document.querySelector('.list').firstElementChild;

            console.log(firstchild);//firstChild获取第一个元素

            var lastchild = document.querySelector('.list').lastElementChild;

            console.log(lastchild);//lastchild获取第一个元素

            var previousSibling = document.querySelector('.list').previousSibling;

            console.log(previousSibling);//获取上一个节点

            var previousElementSibling = document.querySelector('.list').previousElementSibling;

            console.log(previousElementSibling);//获取上一个元素、

                var div = document.getElementById("ele").nextSibling.获取下一个节点
                或
                var nextDiv = div.nextElementSibling;获取下一个元素

两种元素属性的操作方式差别

        元素对象的属性

                1.元素上的属性不定等于标签上的键值对

                        元素对象上类名：className        标签上class

                2.对象名.属性名=值        修改或者添加属性

                3.修改固有属性value时，标签上的键值对不受影响

                4.不能取到标签上自定义键值对

                5.能取到对象上自定义的键值对

                6.表单上的值，以对象属性的vlaue为主

        标签上的键值对

                1.对象名.setArttribute('key','value')设置

                2.对象名.getArttribute('key') 获取值

                3.对象名.removeAttribute('key') 移除

                4.可以取到标签上自定义的键值对

                5.不能取到对象上的自定义的键值对

                6.添加固有属性，会影响元素对象属性的值

标签固有属性

        自定义属性

                如果设置的自定义属性能让用户看，则用setAttribute设置在标签上，如果不能，就用对象名，属性名设置在对象上

文本节点操作

        textContent获取元素以及其后代元素的文本内容,包括空白符

        innerText保留一个空白符,一般只会获取只有文本的标签文本

        innerHTML获取元素种所有的html文本内容

css操作

         行内

                获取:

                     1.获取对象.style.属性名   只能获取行内设置的样式, 不识别 ' - '

                      2.获取当前使用的样式getComputedStyle(元素对象)

        设置

            1.获取对象.style.属性名   只能获取行内设置的样式,不识别 ' - '

             2.使用动态className设置动态样式(常用)

                    先把动态样式用自定义的类名写在样式表[sytle标签或者css文件]中

                    动态的修改元素的类名为自定义类名

            3.通过classList操作类控制CSS

                       为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

                        语法:

                        追加一个类

                        元素.classList.add('类名')

                         删除一个类

                        .classList.remove('类名')

                        切换一个类

dom元素的添加删除

        添加

             方法1：innerHTML拼接  list1.innerHTML +=' <li class="item">'+(cout++)+'</li>'；  

             方法2：使用createElement创建元素节点 createElement（'标签名'）再添加

                            //父元素.append(节点或' ')添加子节点

                            //父元素.appendChild只能添加Node(节点)

                            //父元素.insertBefore(新节点,目标节点)添加子节点

                            // insertAdjacentElement（位置，新节点）

                           位置： // beforebegin //在本身之前插入

                                      // afterbegin //在第一个子节点直接插入

                                      // beforeend //在最后一个子节点直接插入

                                      // afterend //在本身之后插入

        删除

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

                父元素.remoevechild（子节点）删除父元素中的某个子元素

        复制节点

                节点对象.clonNode(true)        true:深拷贝        false:浅拷贝

                cloneNode ()方法返回调用该方法的节点的-一个副本。也称为克隆节点/拷贝节点, true/克隆整个节点 false/不克隆文本

事件的绑定方法

       1. 行内绑定

                this.永远指向window        rguments

        2.在js中绑定 方法1

                元素对象.οnclick=函数对象  一个对象只能绑定一个函数

                this指向谁触发指向谁

        3.在js中绑定 方法2

                添加事件监听 一个对象，同一个事件可以绑定一个函数

                元素对象.addEventListener('事件名',[函数对象,匿名函数,()=>{}])

事件冒泡

        子元素触发的事件会向父元素传递；点击事件从里执行

        阻止冒泡事件：event.stoppropagaion();

事件委托

        原理冒泡存在于父子关系

        当父元素和子元素绑定同样的函数时，可以把事件委托给父元素，在父元素上绑定

事件捕获

        从外到里执行函数

        通过addEventListener的第三给参数开启，true：捕获 ；false：冒泡（默认）

事件对象

       1. event就是一个事件对象 写到我们的侦听函数得 小括号里面 当形参来看

        2.事件对象只有有了事件才存在 他是系统给我们自动创建得，不需要为我们传递参数

        3.事件对象 是 我们事件得一系列相关的数据得集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息

        鼠标坐标等，如果是键盘事件里面就包含了键盘事件，比如判断用户按下了哪个键位都知道

       4.这个事件对象我们可以自己命名 比如 even、evt、e

常见的事件对象的属性和方法

        currentTarget指向绑定元素        target指向触发的元素

         两者区别：

            e.target 指向我们点击的对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li我们给ul 绑定了事件 那么this 就指向ul

        e.clientX 和 e.clientY 只获取可视区 就算文章很长有滚动条得到的也只是可视区的坐标

        e.pageX 和 e.pageY 获取整个文档 e.pageY随着文档长度而变化 此方法有兼容性问题 ie9以上才支持

        e.screenX 和 e.screenY是得到整个屏幕坐标

        preventDefault阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交

        stopPropagation阻止冒泡

鼠标事件

        onclick当用户点击某个对象时调用的事件句柄。冒泡

        oncontextmenu在用户点击鼠标右键打开上下文菜单时触发,不常用，冒泡

        ondblclick当用户双击某个对象时调用的事件句柄。冒泡 

        onmousedown鼠标按钮被按下。冒泡

        onmouseenter当鼠标指针移动到元素上时触发。子元素不会冒泡

        onmouseleave当鼠标指针移出元素时触发，子元素不会冒泡

        onmousemove鼠标被移动时。冒泡

        onmouseover鼠标移到某元素之上。冒泡

        onmouseout鼠标从某元素移开。冒泡

        onmouseup鼠标按键被松开。冒泡

        onwheel滚轮事件，冒泡

键盘事件

             onkeyup 按键弹起的时候 触发

             onkeydown 按键按下的时候 触发

             keypress 按键按下的时候 触发 注意 他不识别功能键 比如 ctrl shift 左右键等

             优先级 keydown > keypress 左后执行keyup

表单事件

        onblur元素失去焦点时触发

        onfocus元素获取焦点时触发

        onchange该事件在表单元素的内容改变时触发(<input> , <keygen>, <select>,和<textarea>)，输入后按Enter才会修改内容

        oninput元素获取用户输入时触发

window事件

• window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码
• window.onscroll 滚动条滚动时触发的事件
• window.onresize；窗口大小发生改变时触发的事件

元素对象的常用属性

        element.clientHeight / clientWidth  返回内容的可视高度 / 宽度（不包括边框，边距或滚动条）

        element.offsetHeight / offsetWidth / offsetLeft / offsetTop

        返回元素的高度 / 宽度 / 相对于父元素的左偏移 / 右偏移(包括边框和填充, 不包括边距)

        element.scrollHeight / scrollWidth / scrollLeft / scrollTop

        返回整个元素的高度（包括带滚动条的隐蔽的地方）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离 / 上边缘的距离