学习周报

JavaScript dom

获取页面元素

获取页面元素有下面几种方法

根据ID获取
根据标签名获得
通过H5新增的方法获得
特殊元素获得

根据ID获得

使用getElementById方法可通过ID获得元素
此方法的参数为ID（区分大小写）
返回一个匹配到 ID 的 DOM Element 对象

<body>
    <div id="speicialDiv"></div>
    <script>
        const sDiv=document.getElementById('speicialDiv');
        console.log(sDiv);
        console.dir(sDiv);
    </script>
</body>

这里使用console.dir(sDiv)可以打印出元素对象更好的查看属性和方法

根据标签名获取元素

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
返回值为元素对象的集合以伪数组形式存储无论有没有这个元素都是以伪数组形式返回
可以使用document.getElementsByTagName()找到同标签名的使用元素
也可以使用Element.getElementsByTagName()的方式找到对应父元素中的子元素

<body>
    <ol id="ol">
        <li>h</li>
    </ol>
    <ul id="ul">
        <li>uuuu</li>
    </ul>
    <script>
        const ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li')[0]);
    </script>
</body>

通过H5新增的方法获得元素

getElementsByClassName() 根据类名获得某些元素集合
具体用法和getElementsByTagName类似
queryselector() 返回指定选择器的第一个元素对象
参数可以为.class(类选择器)、#ID(id选择器)、li(标签名),都将返回第一个元素对象
querySelectorAl1()返回指定选择器的所有元素对象集合

获取特殊元素

获取body标签
通过document.body直接获得
获取html元素
通过document.documentElement获得

事件基础

事件就是一种可以被JavaScript侦察到的行为
可以简单理解为：触发—响应机制
每一个元素都可以触发事件

事件三要素

事件由三部分组成：

事件源
事件被触发的对象，例如：按钮
我们需要获取这个事件源

var btn = document.getElementById('btn');

事件类型
指如何触发这个事件，鼠标经过还是鼠标点击(onclick)还是键盘按下
事件处理程序
通过一个函数赋值的方式完成

<body>
    <button id="btn">唐伯虎</button>
    <script>
        let btn=document.getElementById("btn");
        btn.onclick=function(){
            alert('点蚊香');
        };
    </script>
</body>

执行事件的步骤

获取事件源
注册事件绑定事件
添加事件处理程序(采取函数赋值形式)

例：下面我们需要点击div 然后控制台输出我被选中了

<body>
    <div>233</div>
    <script>
        //点击div 控制台输出 我被选中了
        //1.获取事件源
        const div = document.querySelector('div');
        //2.绑定事件 注册事件
        //3.添加事件处理程序
        div.onclick = function(){
            console.log('点击');
        }
    </script>
</body>

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

改变元素内容

改变元素文本内容

element.innerText
从起始位置到终止位置的内容,但它去除 html标签，同时空格和换行也会被去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

两者的区别:
innerText 不识别html标签非标准去除空格和换行
innerHTML 识别html标签 W3C标准保留空格和换行的

<body>
    <div></div>
    <p>233
        <span>hhh</span>
    </p>
    <script>
        const div = document.querySelector('div');
        const p = document.querySelector('p');
        div.innerText='今天很<strong>无聊</strong>';
        //结果不识别标签原封不动打印出来
        div.innerHTML="今天很<strong>无聊</strong>";
        //识别标签无聊加深

        //读写元素内容
        console.log(p.innerText);
        //空格换行被去除
        console.log(p.innerHTML);
        //空格换行保留
    </script>
</body>

改变元素属性
type、 value、checked、selected、disabled属性可以被直接获取和修改
通过element.src、element.href等直接修改元素的属性
改变表单属性
利用DOM可以操作如下表单元素的属性︰
type. value、 checked、 selected、 disabled

改变表单里面的文字内容是通过改变表单的vulue值来改变的
如果想要表单被点击后不能被点击，可以更改表单的disabled

修改元素的样式属性

element.style 获取行内样式操作
如果需要修改的属性比较少，可直接使用element.style进行单个修改
element.className 获取类名样式操作
当需要修改的属性比较多时，我们可以专门在CSS中写一个类change，当修改时将class名写入元素中

自定义元素操作

获取属性：
直接获取： element.属性，方便但只能获取元素自带的属性
通过getAttribute(‘属性’)：这种方式的特点是能获取自定义属性
设置属性值
element-属性=‘值’设置内置属性值。
element.setAttribute (‘属性’，‘值’)

H5自定义属性
为什么要设置自定义属性：保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。比如

<div data-index“1”></div>

或者使用JS设置

element.setAttribute( 'data-index’,2)

获取H5自定义属性
兼容性获取:element.getAttribute( 'data-index’);
H5新增:element.dataset.index或者element.dataset[ 'index’ ]
(ie 11才开始支持)

节点操作

为什么要学习节点

获取元素：

利用DOM提供的方法获取元素

document.getElementByld()
document.getElementsByTagName)
document.querySelector
//等......

缺点是没有逻辑，让人看不懂元素间的关系
2. 利用节点层级关系获取元素
利用父子兄节点关系获取
元素逻辑性强，但是兼容性稍差心

节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。
利用dom树可以把节点分为不同层级

一般地，节点至少拥有nodeType(节点类型 ) 、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3(文本节点包含文字、空格、换行等)

节点层级

一般用到的是父子兄关系

父级元素

node.parentNode

子节点

parentNode.childNodes
获得父节点的所有子节点
它会把所有节点都包含进去，包含元素节点、文本节点等…
如果需要只获得某一种节点，要经过特殊处理

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        let totalLiList = ul.childNodes;
        let totalLiArr = Array.from(totalLiList);
        let liList = totalLiArr.filter((item)=>
            item.nodeType==1         
        )
        console.log(liList);
    </script>
</body>

因此一般不推荐使用

更好的方法：

parentNode.children(非标准)
获取所有的子元素节点

获取第一个节点或最后一个节点：

firstChild第一个子节点不管是文本节点还是元素节点
lastChild最后一个子节点不管是文本节点还是元素节点
firstElementChild 返回第一个子元素节点
lastElementChild 返回最后一个子元素节点

但最后两个方法存在兼容性问题，因此在实际开发中一般用children方法，将元素节点存储为数组，再取数组的第一个或最后一个
3. 兄弟节点

node.nextsibling
nextsibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
node.previoussibling
previoussibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点.
node.nextElementsibling
nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementsibling
previousElementsibling返回当前元素上一个兄弟节点，找不返回null。

在页面中创建一个新的元素

创建节点

document.createElement( 'tagName " )

document.createElement()方法创建由tagName 指定的 HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
2. 添加节点

node.appendchild (child)
node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.insertBefore (child，指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

删除节点

node. removeChild(child)
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。

复制节点

node.cloneNode ()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。