DOM

最新推荐文章于 2023-06-28 14:36:05 发布

前端笨鸟

最新推荐文章于 2023-06-28 14:36:05 发布

阅读量2.1k

点赞数 25

分类专栏： js学习笔记文章标签： DOM

本文链接：https://blog.csdn.net/qq_41670147/article/details/103177620

版权

js学习笔记专栏收录该内容

24 篇文章 6 订阅

订阅专栏

什么是DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
在这里插入图片描述
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

获取页面元素

DOM在实际开发中主要用来操作元素
获取页面中的元素可以使用以下几种方式：
● 根绝ID获取
● 根据标签名获取
● 通过HTML5新增的方法获取
● 特殊元素获取
根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
由于文档页面从上往下加载，所以需要先有标签，由此script写到标签的下面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="time">2019年11月21日</div>
    <script>
        //1、因为文档页面从上往下加载，所以需要现有标签，由此script写在标签的下面
        //2、get获得  element元素   by通过 采用的是 驼峰命名法
        //3、参数id是大小写敏感的自妇产
        //4、返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);    //输出 <div id="time">2019年11月21日</div>
        console.log(typeof timer);  //输出object
       //console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
</html>

根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

//语法
document.getElementsByTagName('标签名');
//示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>知否知否，应是绿肥环瘦1</li>
        <li>知否知否，应是绿肥环瘦2</li>
        <li>知否知否，应是绿肥环瘦3</li>
        <li>知否知否，应是绿肥环瘦4</li>
        <li>知否知否，应是绿肥环瘦5</li>
        <li>知否知否，应是绿肥环瘦6</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        //返回的是获取过来元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis); //HTMLCollection(6) [li, li, li, li, li, li]
        console.log(lis[0]); //<li>知否知否，应是绿肥环瘦</li>
        //一次打印里面的元素对象需要采取变量的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);

        }
        //element.getElementsByTagName()可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav');
        navlist = nav.getElementsByTagName('li');
        for (var i = 0; i < navlist.length; i++) {
            console.log(navlist[i]);

        }
    </script>
</body>
</html>

注意：
● 因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历。
● 得到元素对象是动态的（div元素里面有任何变动不需要改变js输出内容即可变）
通过HTML5新增的方法获取

语法：
document.getElementsByClassName('类名');  //根据类名返回元素对象集合
document.querySelector('选择器'); //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); //根据指定选择器返回所有元素
示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="box">一个盒子</div>
    <div class="box">二个盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
            <li>服务</li>
        </ul>
    </div>
    <script>
        //getElementsByClassName根据类名获得某些元素组合
        var boxs = document.getElementsByClassName('box'); //HTMLCollection(2) [div.box, div.box]
        console.log(boxs);
        //querySelector 返回指定选择器的第一个元素对象，注意需要加.box或#box
        var firstBox = document.querySelector('.box');
        console.log(firstBox); //
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        //querySelectorAll()返回指定选择器的所有元素对象
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>
</body>
</html>

获取特殊元素body、html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //1、获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        //2、获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

</html>

事件基础

事件概述
JavaScript使之有能力创建动态页面，而时间是可以被JavaScript侦测到的行为
简单理解：触发----响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //点击一个按钮，弹出对话框
        //1、事件有三部分组成：事件源、事件类型、事件处理程序，称为事件三要素
        //(1)事件源：事件被触发的对象
        var btn = document.getElementById('btn');
        //(2)事件类型：鼠标点击(onclick)
        //(3)事件处理程序：通过一个函数赋值的方式完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

</html>

执行事件的步骤
①获取事件源
②注册事件（绑定事件）
③添加事件处理程序（采取函数赋值形式）
常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

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

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

innerText

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        function getTime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            var hours = date.getHours();
            var hours = hours < 10 ? '0' + hours : hours; //小于10补0
            var minutes = date.getMinutes();
            var minutes = minutes < 10 ? '0' + minutes : hours; //小于10补0
            var seconds = date.getSeconds();
            var seconds = seconds < 10 ? '0' + seconds : hours; //小于10补0
            // return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day] + hours + '点' + minutes + '分' + seconds + '秒';
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
        var div = document.querySelector('div');
        div.innerText = getTime();
		//页面显示内容：今天是：2019年11月21日 星期四
    </script>
</body>
</html>

innerHTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        div.innerHTML = '<strong>今天是：</strong>2019年11月21日'
    </script>
</body>

</html>

innerText和innerHTML的区别：
1、innerText不识别html标签（非标准）
2、innerHTML识别html标签（w3c标准）
俩个属性可读写，可获取元素里面的内容

常用元素的属性操作

//1、innerText、innerHTML改变元素内容
//2、src、href
//3、id、alt、title
//图片切换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <br><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574339150468&di=b3fe7da8699435f0460e7d74ade6aae3&imgtype=0&src=http%3A%2F%2Fimg.ifeng.com%2Fres%2F200811%2F1126_500745.jpg" alt="" title="刘德华">
    <script>
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        zxy.onclick = function() {
            img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574339405002&di=d8c2c3d616461c6caea6a7f3d19a87be&imgtype=0&src=http%3A%2F%2Fimg2015.zdface.com%2F20170617%2F06a3a6f30e9a421f1d119fbb296a5999.png';
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574339150468&di=b3fe7da8699435f0460e7d74ade6aae3&imgtype=0&src=http%3A%2F%2Fimg.ifeng.com%2Fres%2F200811%2F1126_500745.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

</html>

表单元素的属性操作
利用DOM可以操作如下表单元素的属性：

//type、value、checked、selected、disabled
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1、获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2、注册事件处理程序
        btn.onclick = function() {
            //表单里面的值，文字内容是通过value来修改的
            input.value = '被点击了';
            //如果想要某个表单被禁用，不能再点击，则使用disabled
            //btn.disabled = true;
            //也可使用this，this指向的是时间函数的调用者btn
            this.disabled = true;
        }
    </script>
</body>

</html>

样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式。

//1、element.style    行内样式操作
//2、element.className  类名样式操作

element.style 行内样式操作

//element.style  点击切换颜色
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            div.style.backgroundColor = 'pink';
        }
    </script>
</body>
</html>

element.className类名样式操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: crimson;
        }
        
        .change {
            width: 300px;
            height: 300px;
            background-color: cyan;
        }
    </style>
</head>

<body>
    <div class=‘first’></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            // this.className = 'change'; 
            //change 会把原先的覆盖点，如果想要保留原先的类名，可以多类名选择器
            this.className ='first change'
        }
    </script>
</body>

</html>

注意：
● 如果样式修改较多，可以采取操作类名方式更改元素样式
● class因为是保留字，因此使用className来操作元素类名属性
● className会直接更改元素的类名，会覆盖原先的类名，如果想要保留原先的类名，可以多类名选择器。
案例：开关灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var flag = 0;
        btn.onclick = function() {
            if (flag == 0) {
                document.body.style.backgroundColor = '#000';
                flag = 1;
            } else {
                document.body.style.backgroundColor = '#fff';
                flag = 0

            }
        }
    </script>
</body>

</html>

排他思想
如果有同一组元素，想要某一元素实现某种样式，需要用到循环的排他思想算法，首先先排除其他，然后再设置自己，这种排除其他人的思想成为排他思想。
1、所有元素全部清除样式；
2、给当前元素设置样式；
3、注意顺序不能颠倒，首先清除全部样式，再给当前元素设置样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button style="background-color: red;">按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        var btn = document.querySelectorAll('button');
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                for (var i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

</html>

自定义属性的操作

获取属性值
● element.属性获取属性值
● element.getAttribute(‘属性’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //(1)element.属性
        console.log(div.id);
        //(2)element.getAttribute('属性')，get得到获取，Attribute属性
        console.log(div.getAttribute('id'));
    </script>
</body>
</html>

区别：
● element.属性获取内置属性值（元素本身自带的属性）
● element.getAttribute(‘属性’)；主要获得自定义的属性（标准），程序员自定义的属性。
设置属性值
● element.属性= ‘值’ 设置内置属性值。
● element.setAttribute(‘属性’, ‘值’)；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demo" index="1"></div>
    <script>
        
        var div = document.querySelector('div');
        //2、设置元素属性值
        //（1）element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        //(2)element.setAttribute('属性','值'); 主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class','footer');//注意：用的是class而不是className
    </script>
</body>

</html>

区别：
● element.属性设置内置属性值
● element.setAttribute(‘属性’);主要设置自定义的属性（标准）
移除属性 removeAttribute

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        //3、移除属性 removeAttribute
        div.removeAttribute('index');
    </script>
</body>

</html>

H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起企业，不容易判断是元素的内置属性还是自定义属性。
H5新增了自定义属性：
设置h5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值

<div data-index="1"></div>

或者使用js设置

element.setAttribute('date-index', 2)

获取H5自定义属性
1、 element.getAttribute(‘date-index’)；兼容性较好，经常使用
2、H5新增element.dateset.index或者element.dataset[‘index’]，注意：ie11才开始支持

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        //console.log(div.getTime);   //由于此方法调用内置属性由此输出结果为undefined
        console.log(div.getAttribute('getTime')); //输出结果为20
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-time')); //输出结果为20
        //h5新增的获取自定义属性的方法
        console.log(div.dataset); //输出结果DOMStringMap {index: "2", time: "20"}
        console.log(div.dataset.index); //输出结果为2
        console.log(div.dataset['index']); //输出结果为2
        //如果自定义属性里面有多个-链接的单词，获取的时候采取驼峰命名法
        console.log(div.dataset.listName); //输出结果为andy
        console.log(div.dataset['listName']); //输出结果为andy
    </script>
</body>

</html>

节点操作

为什么学节点操作
获取元素通常使用俩种方式：
1、利用DOM提供的方法获取元素
● document.getElementById()
● document.getElementsByTagName()
● document.querySelector等
● 逻辑性不强、繁琐
2、利用节点层级关系获取元素
● 利用父子兄节点关系获取元素
● 逻辑性强，但是兼容性稍差
以上俩种方式均可获取元素节点，后面都会使用，但是节点操作更简单
节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
● 元素节点 nodeType为1
● 属性节点 nodeType为2
● 文本节点 nodeType为3（文本节点包括文字、空格、换行等）
在实际开发中，节点操作主要操作的是元素节点
节点层级
利用DOM数可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1、父级节点

//语法：
node.parentNode
实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="ewm">二维码</span>
    </div>
    <script>
        //1.父节点 parentNode
        var ewm = document.querySelector('.ewm');
        //得到的是离元素最近的父级节点('.box'),如果找不到父节点就返回为null
        console.log(ewm.parentNode);
    </script>
</body>

</html>

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

1.parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获取里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

2.parentNode.children(非标准)

parentNode.children是一个制度属性，返回所有的子元素节点。它只返回子元素节点，其余节点（文本节点）不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>我是li一</li>
        <li>我是li二</li>
        <li>我是li三</li>
        <li>我是li四</li>
        <li>我是li五</li>
        <li>我是li六</li>
    </ul>
    <script>
        //DOM提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        //1、子节点childNOdes所有的子节点包含元素节点文本节点等等
        console.log(ul.childNodes);
        //2、children获取所有的子元素节点，也是实际开发常用的
        console.log(ul.children);
        //firstElementChild返回第一个子元素节点，找不到则返回null
        console.log(ul.firstElementChild);
        //lastElementChild返回最后一个子元素节点，找不到则返回null
        console.log(ul.lastElementChild);
        //注意：firstElementChild、lastElementChild有兼容性问题，IE9以上才支持
        //3、实际开发的写法，即没有兼容性问题又返回第一个子元素
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1]);
    </script>
</body>

</html>

兄弟节点
1、node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
2、node.previousSibing
previousSibing返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
3、node.nextElementSibing
nextElementSibing返回当前元素下一个兄弟元素节点，找不到则返回null
4、node.previousElementSibing
previousElementSibing返回当前元素上一个兄弟节点，找不到则返回null
注意：nextElementSibing、previousElementSibing有兼容性问题，IE9以上才支持
创建节点
document.createElement(‘tagName’)
document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据需求动态生成的，所以也称为动态创建元素节点。
node.insertBefore(child,指定元素)
删除节点
node.removeChild(child)
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul></ul>
    <button>删除</button>
    <ul class="nav">
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        //1、创建元素节点
        var li = document.createElement('li');
        //2、添加节点node.appendChild(child) node 父级 child是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3、node.insertBefore(child,指定元素)
        //node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        //删除节点
        var nav = document.querySelector('.nav');
        var btn = document.querySelector('button');
        btn.onclick = function() {
            if (nav.children.length == 0) {
                this.disabled = true;
            } else {
                nav.removeChild(nav.children[0])
            }
        }
    </script>
</body>

</html>

复制节点（克隆节点）
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
● 如果括号参数为空或者为false，则为浅拷贝，即只克隆复制节点本身，不复制克隆里面的子节点。
● 括号为true深拷贝复制标签复制里面的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul></ul>
    <button>删除</button>
    <ul class="nav">
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        
        //复制节点
        //1、node.cloneNode();括号为空或者里面是false浅拷贝只赋值标签不复制里面的内容
        //2、node.cloneNode();括号为true深拷贝复制标签复制里面的内容
        var uls = document.querySelector('.nav');
        var lis = ul.children[0].cloneNode();//浅拷贝
         var lis = ul.children[0].cloneNode(true);//深拷贝
        uls.appendChild(lis);
    </script>
</body>

</html>

三种动态创建元素区别
● document.write()
● element.innerHTML
● document.createElement()
区别
1、document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面重新绘制
2、innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3、innerHTML创建多个元素效率更高（注意：不要拼接字符串，采取数组形式拼接），结构稍微复杂

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
    function fn() {
        var d1 = +new Date();
        var arr = [];
        for (var i = 0; i < 1000; i++) {
            arr.push('<div style="width:100px; height:20px; border:1px solid blue;">你好</div>');
        }
        document.body.innerHTML = arr.join('');
        var d2 = +new Date();
        console.log(d2 - d1);

    }
    fn();
</script>

</html>

4、createElement()创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比createElement高

DOM重点核心

文档对象模型，是WC3组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1、对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
2、对于HTML，dom使用html形成一课dom树，包含文档、元素、节点
注意：获取过来的DOM元素是一个对象（object），所以称为文档对象模型
关于dom操作，主要针对元素的操作。有创建、增、删、改、查、属性操作、时间操作。
创建
1.document.write
2.innerHTML
3.createElement
增
1.appendChild
2.insertBefore
删
1.removeChild
改
主要修改dom的元素属性，dom元素的内容、属性，表单的值等
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled
4.修改元素样式：style、className
查
主要获取查询dom的元素
1.DOM提供的API方法：getElementById、getElementsByTagName不太推荐使用
2.H5提供的新方法：querySelector、querySelectorAll 提倡使用
3.利用节点操作获取元素：父(parentNode)、子（children）、兄（previousElementSibling、nextElementSibling）提倡使用
属性操作
主要针对自定义属性
1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移除属性
事件操作
给元素注册时间，采取事件源.事件类型=事件处理程序

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

前端笨鸟

关注

25
点赞
踩
75

收藏

觉得还不错? 一键收藏
2
评论
DOM

什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中...
复制链接

扫一扫