DOM基础

1. API接口

1.1.document.getElementById()

1	document.getElementById()

document.getElementById() 只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一

1.2.document.getElementByTagName（）

1	document.getElementByTagName（）

1.3.document.getElementByClassName（）

1	document.getElementByClassName（）

document.getElementByTagName（），document.getElementByClassName（）返回的是元素对象的集合，以伪数组的形式存储。

2. H5新增获取元素方式

2.1.document.querySelector()

1	document.querySelector()

document.querySelector()返回指定选择器的第一份元素，切记括号里选择器需要加符号 .box #nav

2.2.document.querySelectorALL()

1	document.querySelectorALL()

返回指定选择器丽的全部元素对象的集合

<body>
    <div>文本</div>
    <button id="but">点击</button>
    <p class="wen">cioaqoam</p>
    <script>
        var button = document.getElementsByTagName('div');
        console.log(div);
        var but = document.getElementById('but');
        console.log(but);
        let p = document.getElementsByClassName('wen');
        console.log(p);
        var button = document.querySelector('div');
        var div = document.querySelector("#but");
        div.onclick = function() {
                // this.style.width = '300px';
                this.innerHTML = 'changfangxing';
                this.className = 'change';
            }
            but.onclick = function() {
                alert(333);
            }
        }
    </script>
</body>

3.事件基础

3.1执行事件的步骤

（1）获取事件源

（2）注册事件（绑定事件）

（3）添加时间处理程序（采用函数赋值形式）

3.2改变元素内容

1	element.innerText //(非标准)

从元素起始位置到终止位置，但他会去除html标签，同时空格和换行也会去掉

1	element.innerHTML //(W3C标准常用)

包括html标签，同时保留空格和换行

两个属性可读可写，可以获取元素内容

案例：仿京东显示隐藏密码

<body>
    <div class="box">
        <label for=""><img src="110.jpg" alt="" id="eye"></label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //核心思路：点击按钮将密码框切换为 文本框，并可以查看密码明文
        //一个按钮两个状态 点击一次 切换为文本框 继续点击一次切换为密码框
        // 算法：利用一个flag变量 来判断flag的值 如果为1就切换为文本框 flag设置为0 如果			为0 就切换密码框 flag设置为1

        //1.获取元素 
        var eye = document.querySelector('img');
        var pwd = document.querySelector('input');
        //注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            //点击一次之后flag一定要变化
            if(flag == 0 )
            {
                pwd.type = 'text';
                flag = 1;
                eye.src = '222.jpg';
            }else{
                pwd.type = 'password';
                flag = 0;
                eye.src = '110.jpg'
            }     
        }
    </script>
</body>

3.3样式属性操作

1
2
3

（1）element.style    //行内样式操作

（2）element.className   //类名样式

1 2	element.style.width = '200px' element.className = 'change'

js采用驼峰命名法

js修改style样式，产生的是行内样式，权重较高

3.4获取特殊元素（body html）

1
2
3

(1)document.body    //返回body元素对象

(2)document.documentElement   //返回html对象

3.5排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:

1.所有元素全部清除样式

2.给当前元素设置样式

3.注意顺序不能颠倒

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
   <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns 获得的是伪数组 里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log('11');
                
                // 我们先把所有的按钮背景颜色去掉 
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                //再把当前的按钮背景颜色设置成pink
                this.style.backgroundColor = 'pink';
            } 
        }
    </script>

3.6自定义属性操作

1.获取属性值

1
2
3

（1）element.属性   //获取内置属性（本身自带）

（2）element.getAttribute('属性')//主要获取自定义属性（标准）

2.设置属性值

1
2
3

（1）element.属性 = '值'  //设置内置属性值

（2）element.setAttribute('属性'，'值')  //设置自定义属性的值

<body>
    <div index = '1'>文本</div>
    <input type="text" value="恭喜发财">
    <script>
        var div = document.querySelector('div');
        var input = document.querySelector("input");
		
        input.value = '万事如意';
        div.setAttribute('index', '2');
    	console.log(input.value);
        console.log(div.getAttribute('index'));
    </script>
</body>

3.移除属性

1	element.removeAttribute('属性')

4.H5新增获取元素自定义属性

1	element.dataset.index 或 element.data['index'] // IE11才开始支持

<div data-index="2">123</div>
   <script>
       var div = document.querySelector('div');
       console.log(div.dataset.index);
       console.log(div.dataset['index']);
   </script>

1.dataset是一个存储了全部data开头的自定义属性的集合

2.如果自定义属性有多个”-“连接，获取时采用驼峰命名法 data-list-name—>listaName

H5新特性自定义属性以data开头

4.节点操作（node）

4.1节点概述

一般地，节点至少拥有nodeType（节点类型）nodeName（节点名称）和nodeValue（节点值）这三个基本特性

（1）元素节点 nodeType为1

（2）属性节点 nodeType为2

（3）文本节点 nodeType为3 //包含文字，空格，换行

4.2节点层级

（1）父级节点

1	node.parentNode

node.parentNode属性可返回指定节点最近的父节点，找不到父节点返回null

（2）子节点

1	parentNode.childNodes(标准)

parentNode.chileNodes返回指定节点的子节点的集合，该集合为即使更新的集合

注：返回值丽包含所有的子节点，包括元素节点，文本节点，如果想要获取里面的元素节点，需要经过专门的处理，所以一般不用childNodes

处理方式：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
            var ul = document.querySelector('ul');
            for(var i=0; i<ul.childNodes.length; i++){
                if(ul.childNodes[i].nodeType == 1){
                    console.log(ul.childNodes);
                }
            }
    </script>
</body>

1	parent.children //(非标准常用)

//是一个只读属性，只返回子节点元素

1	parentNode.firstElementChild

//返回第一个元素节点，找不到返回null

1	parentNode.lastElementChild

//返回最后一个子节点

parentNode.firstElementChild和parentNode.lastElementChild有兼容问题，IE9才支持

(3)兄弟节点

1	node.nextElementSibling

//返回指定元素下面的兄弟元素节点，找不到返回null

1	node.previousElementSibling

//返回指定元素节点的上一个兄弟节点

node.nextSibling和node.previousSibling获取全部节点（不常用）

4.3创建节点

（1）创建节点

1	document.createElement('tagName')

//创建节点有tagName指定的HTML元素

//元素是根据我们的需求动态生成，称为动态创建元素节点

（2）添加节点

1	node.appendChild(child)

//将创建的节点添加到父节点的节点末尾

1	node.insertBefore(child, 指定元素)

//将创建的节点添加到父节点指定节点的前面

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        var li = document.createElement('li'); //创建节点
        console.log(li);
        var ul = document.querySelector('ul');
        li.innerHTML = '恭喜发财' //添加内容节点
        ul.appendChild(li); //在尾部添加节点
        var li = document.createElement('li');
        li.innerHTML = '万事如意';
        ul.insertBefore(li, ul.children[0]); //在第一个li前面添加节点
    </script>
</body>

4.4删除节点

1	node.removeChild(child)

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

4.5复制节点（克隆节点）

1	node.cloneNode()

node.cloneNode()方法返回调用该方法的一个副本。也称为克隆节点/拷贝节点，如果括号里的参数为空或者false，则是浅拷贝，即只克隆复制节点的本身，不克隆里面的子节点。如果括号里的参数是true，则是深拷贝，会复制节点本身以及里面所有的子节点。

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.cloneNode(); //括号里的参数为空或者false，则是浅拷贝，即只克隆复制节点的本身，不克隆里面的子节点
        ul.cloneNode(true); //参数是true，则是深拷贝，会复制节点本身以及里面所有的子节点
        var lis = ul.children[0].cloneNode(true);
        ul.appendChild(lis);
    </script>
</body>

5.DOM操作汇总

创建

1
2
3

document.write
innerHTML
createElement

增

appendChild

insertBefore

删

removeChild

改

主要修改DOM元素的属性，DOM元素的内容，属性，表单值等

修改元素属性：src， href，title等
修改元素内容：innerText，innreHTML
修改表单元素：value，type，disabled
修改元素样式：style，className

查

 主要获取查询dom的元素

DOM提供的API方法：getElementById， getElementByTagName（古老的方法，不推荐使用）
H5提供的新方法：querySelector，querySelectorAll（提倡）
利用节点操作获取元素：父（parentNode），子（children），兄（previousElementSibling, nextElementSbling）提倡

属性操作

主要针对自定义属性

setAttribute：设置自定义属性值
getAttribute：获取自定义的属性值
removeAttribute：移除属性