JavaScript之DOM之获取元素、操作元素、自定义属性、节点、事件

一、获取元素

1. 根据ID获取（getElementById(ID)获取元素）

<div id="time">2022-01-23</div>
    <script>
        var element = document.getElementById('time');
        console.log(element);
        console.log(typeof element);
        console.dir(element);
    </script>

2.2. 根据标签名获取元素（getElementByTagName(标签名)获取元素）

document.getElementByTagName('标签名')；

还可以获取某个父元素内部所有标签名的子元素，父元素必须指明是哪个元素对象，并且获取的时候不包括父元素自己。

element.getElementByTagName('标签名')；

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol id="hei">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        for (var i = 0; i < lis.length; i++)
            console.log(lis[i]);
        var element = document.getElementById('hei');
        console.log(element.getElementsByTagName('li'));
    </script>

3. 通过HTML5新增的方式获取
根据类名返回元素对象集合：

document.getElementByClassName('类名')；

根据指定选择器返回第一个元素对象：

document.querySelector('选择器')；

根据指定选择器返回：

document.querySelectorAll('选择器')；

<div class="box"> 1 </div>
    <div class="box"> 2 </div>
    <div id="aa">3</div>
    <div id="aa">4</div>
    <script>
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        var aas = document.querySelector('#aa');
        console.log(aas);
        var a = document.querySelector('div');
        console.log(a);
        var aaas = document.querySelector('.box');
        console.log(aaas);
        var lis = document.querySelectorAll('.box');
        console.log(lis);
    </script>

运行后控制台结果为：

4.获取特殊元素（body、html）
获取body元素：

document.body

获取html元素：

document.documentElement

二、操作元素

1.操作元素–修改元素内容
从起始位置到终止位置的内容。但去除html标签，同时换行和空格也会去掉:

element.innerTEXT

从起始位置到终止位置的内容。包括html标签，同时保留换行和空格:

element.innerHTML

 <button>当前时间</button>
    <div>时间</div>
    <p>123</p>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var p = document.querySelector('p');
        // 注册事件
        btn.onclick = function() {
            div.innerText = 2022;
        }
        p.innerText = getDate();

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + '\t' + arr[day];
        }
    </script>

运行结果是：
初始状态为：

点击当前时间的按钮后：

2.操作元素–修改元素属性

点击按钮1、2后会改变图片属性：

<button id="a">1</button>
    <button id="b">2</button>
    <img src="" alt="" title="12">
    <script>
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        var img = document.querySelector('img');
        a.onclick = function() {
            img.src = '2';
            img.title = 123;
        }
        b.onclick = function() {
            img.src = '3';
            img.title = 1234;
        }
    </script>

3.操作元素—修改表单属性

点击按钮后value从’输入内容‘会改为’被点击了‘：

<button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function() {
            input.value = '被点击了';
            btn.disabled = true;
        }
    </script>

4.操作元素—修改样式属性
行内样式操作：

element.style

类名样式操作：

element.className

点击盒子后，背景颜色从粉色变为紫色，同时盒子宽度发生变化：

  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
     <div></div>
       <script >
            var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'purple ';
            this.style.width = '300px';
        }
       </script>

三、自定义属性

1.获取自定义属性

element.getAttribute('属性');

<div getTime="20" data-index="3"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 2);
        console.log(div.getAttribute('data-time'));
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
    </script>

2.设置自定义属性

element.setAttribute('属性');

3.移除属性

element.removeAttribute('属性');

四、节点

1.父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点。如果指定的节点没有父节点则返回null

2.子级节点

node.childNodes

3.兄弟节点

4.节点操作之创建和添加节点

5.删除节点

6.复制节点

node.cloneNode()

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

五、事件

1.注册事件（绑定事件）

<button>方法监听注册事件</button>
    <button>传统注册事件</button>
    <script>
        var btn = document.querySelectorAll('button');
        // // 同一个元素同一个事件可以注册多个监听器
         btn[0].addEventListener('click', function() {
            alert('弹出');
         })
        btn[0].addEventListener('click', function() {
                 alert('弹出1');
             })
        // 传统注册事件的唯一性
        btn[1].onclick = function() {
                alert('弹出2');
                btn[1].onclick = null;
            }
    </script>

2.删除事件（解绑事件）

3.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。

4.事件对象
1.e.target返回触发事件的对象

e.target和this的区别:

<div style="width: 200px;height: 200px;background-color: bisque;" class="div1">
    <div class="div2">123</div>
</div>
<ul>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click', function(e) {
        console.log(e.target);
        console.log(this);
    })
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        console.log(e.target);
        console.log(this);
    })
</script>

2.e.type返回事件的类型，如click，不带on

<div>122</div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click', fn);

    function fn(e) {
        console.log(e.type);
    }
</script>

3.e.preventDefault() 阻止默认行为

4.e.stopPropagation() 阻止事件冒泡

5.事件委托
事件委托的原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。

6.常见的鼠标事件

禁止选中文字和禁止右键菜单：


获得鼠标在页面中的坐标：

7.常用的键盘事件：

可以用keyCode判断用户输入的是哪个键：
keyCode可以返回改键的ACSII值