APl DOM文档对象模型

一.DOM简介

1.什么是DOM

文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。

2.DOM 树

在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象

二.获取元素的方法

1.获取页面中的元素可以使用以下几种方式

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

1.根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象

代码演示

<body>
    <div id="time">2020-11-26</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们的script写在标签下面
        // 2.    document文档    get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个对象
        var timer = document.getElementById('time');
        console.log(timer);
        // 5.console.dir 打印我们返回得的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

2.根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
语法如下

document.getElementsByTagName('标签名')

注意：

1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历
得到元素对象是动态的

代码演示

<body>
    <ul>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
    </ul>
    <ul id="nav">
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li')
        console.log(lis);
        // 2.如果想要依次打印里面的元素对象我们可以采取遍历方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签
        var nav1 = document.getElementById('nav') //这个获取nav元素
        var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签  要先获取 nav元素在获取里面的li
        console.log(navli);
    </script>
</body>

3.通过 HTML5 新增的方法获取(注意兼容)

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll('选择器'); // 根据指定选择器返回

注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

代码演示

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

4.获取特殊元素(body,html)

获取body元素

 - doucumnet.body // 返回body元素对象

获取html元素

. document.documentElement // 返回html元素对象

代码演示

<body>
    <script>
        // 获取bdoy元素
        var bodyEle = document.body
        console.log(bodyEle); //返回body元素
        // 获取html元素
        var htmlEle = document.documentElement
        console.log(htmlEle); //返回html元素
    </script>
</body>

三.事件基础

1.事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个
事件，然后去执行某些操作。

代码演示

扫描二维码关注公众号，回复： 12699903 查看本文章

<body>
    <button id="btn">浩哥</button>
    <script>
        // 点击一个按钮，弹出一个对话框
        // 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序 也称为事件三要素
        // (1).事件源 事件被触发的对象  
        var but = document.getElementById('btn')
            // (2).事件类型   如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过还是？？？？
            // (3).事件处理程序 通过一个函数赋值的方式 完成  因为函数就是实现某种功能的
        but.onclick = function() {
            alert('浩哥爱编程')
        }
    </script>
</body>

在这里插入图片描述

2.执行事件的步骤

1. 获取事件源(意思是你要获取那个元素)
2. 注册事件(绑定事件意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为)
3. 添加事件处理程序(采取函数赋值形式意思是你想做啥)

代码演示

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

在这里插入图片描述

3.常见的鼠标事件

在这里插入图片描述
鼠标不断的移动，使用鼠标移动事件： mousemove

四.操作元素

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

1.操作元素内容(改变元素内容)

elemeny.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

elemernt.innerHTML

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

代码演示

  <title>Document</title>
    <style>
        div,
        p {
            height: 30px;
            width: 300px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        // 当我们点击了按钮，div里面的文字会发生变化
        // 1.获取元素  注意这里的按钮 和div都要获取到 因为 点击按钮div里面要发生变化所以都要获取
        var but = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.绑定事件
        // but.onclick
        // 3.程序处理
        but.onclick = function() {
        // 改变元素内容 element(元素).innerText
        div.innerText = '2020-11-27'
        }
        // 4.我们元素可以不用添加事件，就可以直接显示日期
        var p = document.querySelector('p');
        p.innerText = '2020-11-27';
    </script>

在这里插入图片描述

elemeny.innerText和elemeny.innerHTML的区别
代码演示

<body>
    <div></div>
    <p></p>
    <ul>
        <li> 文字</li>
        <li>123</li>
    </ul>
    <script>
        // innertText 和 innertHTML 的区别
        // 1. innerText 不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是:</strong> 2020';

        // 2.innertHTML 识别html标签 W3C标准 保留空格和换行的   推荐尽量使用这个 因为这个是标准
        var p = document.querySelector('p')
        p.innerHTML = '<strong>今天是:</strong> 2020';

        // 3.这俩个属性是可读写的 意思是 除了改变内容还可以获得元素里面的内容的
        var ul = document.querySelector('ul')
        console.log(ul.innerText);
        console.log(ul.innerHTML);
    </script>
</body>

在这里插入图片描述

2. 操作常见元素属性

innerText、innerHTML 改变元素内容
src、href
id、alt、title

代码演示

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img">
    <script>
        // 修改属性 src
        // 我们可以操作元素得方法 来修改元素得属性 就是 元素的是什么属性 在重新给值就可以完成相应的赋值操作了
        // 1.获取元素
        var ldh = document.getElementById('ldh')
        var zxy = document.getElementById('zxy')
        var img = document.getElementById('img')
            // 2.注册事件 程序处理
        zxy.onclick = function() {
            // 当我们点击了图片的时候图片路径就发生变化   这里的.表示 的 得意思
            img.src = './images/zxy.jpg';
            // 当我们变换图片得同时里面得title也要跟着变 所以前面要加上img.
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = './images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

在这里插入图片描述

3.操作表单元素属性

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

type、value、checked、selected、disabled

代码演示：

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 我想把value里面的输入内容改变为 被点击了
        // 1.获取元素
        var but = document.querySelector('button')
        var input = document.querySelector('input')
            // 2.注册事件 处理程序
        but.onclick = function() {
            // input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过value来修改的
            input.value = '被点击了'
                // 如果需要某个表单被禁用 不能再点击了使用 disabled  我们想要这个按钮 button禁用
                // but.disabled = true
                // 还有一种写法
                // this指向的是事件函数的调用者 谁调用就指向谁 这里调用者是btn
            this.disabled = true
        }
    </script>
</body>

在这里插入图片描述

4.操作元素样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

 1.element.style 行内样式操作

注意：

JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高

代码演示

   <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 要求点击div变成粉色 height变为250px
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取的是驼峰命名法
            // this等于div this调用者 谁调用谁执行
            this.style.backgroundColor = 'pink'
            this.style.height = '250px'
        }
    </script>

在这里插入图片描述

 2.element.className 类名样式操作

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

代码演示

  <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 如果想继续添加样式即在change添加即可
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>

在这里插入图片描述

5.自定义属性的操作

1.获取属性值

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

区别:

element.属性获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性

2.设置属性值

element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’，‘值’)

区别：

element.属性设置内置属性值
element.setAttribute(‘属性’)；主要设置自定义的属性(标准)

3.移除属性

element.removeAttribute(‘属性’)；

代码演示

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1.获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        // (2) element.getAttribute('属性') get获取得到 attribute属性的意思 我们自己添加的属性称之为自定义属性
        console.log(div.getAttribute('id')); //demo
        console.log(div.getAttribute('index')); // 1
        // 2.修改元素的属性值
        // (1) element.属性 = '值' 
        div.id = 'test'
        div.className = 'navs'
            // (2) element.setAttribute('属性','值')
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊
            // 3.移除属性 removeAttribute(属性)
        div.removeAttribute('index');
    </script>
</body>

只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置如果是自带属性用element.属性来设置

6.H5自定义属性

自定义属性的目的：第一、是为了保存属性 第二、并且使用数据。有一些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取的
但是有些自定义属性很容易引起歧义，不容易判断是元素还是自定义属性
H5给我们新增了自定义属性：
1.设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值比如<div data-index:“1”>
或者使用JS设置element.setAttribute(‘deta-index’,2)

2.获取H5自定义属性

兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个
H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持

代码演示

<body>
    <div getTime="10" data-index="20" data-name-list="40"></div>
    <script>
        // 获取元素
        var div = document.querySelector('div');

        console.log(div.geTime); //undefined  getTime是自定义属性不能直接通过元素的属性来获取 而是用自定义属性来获取的getAttribute(‘属性’)

        console.log(div.getAttribute('getTime')); //10
        // H5添加自定义属性的写法以data-开头
        div.setAttribute('data-time', 30)
            // 1.兼容性获取H5自定义属性
        console.log(div.getAttribute('data-time')); // 30
        // 2.H5新增的获取自定义属性的方法  它只能获取data-开头的
        // dataset 是一个集合的意思存放了所有以data开头的自定义属性  如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可
        console.log(div.dataset);
        console.log(div.dataset.time); // 30
        // 还有一种方法dataset['属性']
        console.log(div.dataset['time']); // 30
        // 如果自定义属性里面有多个-链接的单词 我们获取的时候采取驼峰命名法 不用要-了
        console.log(div.dataset.nameList); // 40
        console.log(div.dataset['nameList']); // 40
    </script>
</body>

五.节点操作

1.为什么要学习节点操作

获取元素通常使用俩种方式
（1）利用DOM提供的方法获取元素但是逻辑性不强繁琐
（2）利用节点层级关系获取元素如利用父子，兄弟关系获取元素逻辑性强，但是兼容性不怎么好

2.节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM
树中的所有节点均可通过javascript进行访问，所有HTML元素(节点) 均可被修改，也可以创建或删除
在这里插入图片描述一般地，节点至少拥有nade Type(节点类型)、nodeName(节点名称)和nodeValue(节点值) 这三个基本属性

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

实际开发中，节点操作主要操作的是元素节点

3.节点层级

利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系

1.父级节点

1.node.parentNode

parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！
如果指定的节点没有父节点就返回null

代码演示

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script>
        var box1 = document.querySelector('.box1')
            // 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是null
        console.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点
    </script>
</body>

2.子级节点操作

1.parentNode.children（非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用)
虽然children是一个非标准，但是得到了各个浏览器的支持，我们大胆使用即可！！！

代码演示

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        //   DOM 提供的方法（APL）获取 这样获取比较麻烦
        var ul = document.querySelector('ul')
        var lis = ul.querySelectorAll('li')
         // children子节点获取  ul里面所有的小li 放心使用没有限制兼容性 实际开发中经常使用的
        console.log(ul.children);
    </script>

如何返回子节点的第一个和最后一个？

2.parentNode.firstElementChild

firstElementChild返回第一个子元素节点，找不到则返回unll

3.parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null

注意：这俩个方法有兼容性问题，IE9以上才支持谨慎使用
但是我们有解决方案

如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

代码演示

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
            // 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容
        console.log(ul.firstElementChild);
        // 2.lastElementChild返回最后一个子元素节点
        console.log(ul.lastElementChild);
        // 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个
    </script>
</body>

3.兄弟节点

1.node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。注意包含所有的节点

2.node.previousSibling

previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意包含所以有的节点

代码演示

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div')
            // 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等
        console.log(div.nextSibling); //这里返回的是#text 因为它的下一个兄弟节点是换行
        // 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等
        console.log(div.previousSibling); //这里返回的是#text 因为它的上一个兄弟节点是换行
    </script>
</body>

3.node.nexElementSibling

nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null

4.node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点，找不到返回null

注意：这俩个方法有兼容性问题，IE9以上才支持

代码演示

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div')
        // nextElementSiblingd得到下一个兄弟元素节点
        console.log(div.nextElementSibling); // span  
        // previousElementSibling  得到的是上一个兄弟元素节点
        console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的
    </script>
</body>

怎么解决兼容性问题呢？
可以封装一个兼容性函数（简单了解即可在实际开发中用的不多）

function getNextElementSibling(element) {
 var el = element;
 while (el = el.nextSibling) {
 if (el.nodeType === 1) {
 return el;
     }
  }
 return null;
 }

4.创建节点

1.document.createElement('tagName')

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

我们创建了节点要给添加到节点里面去称为添加节点

1.node.appendChild（child）

node.appendChild（）方法将一个节点添加到指定父节点的子节点列表末尾

2.node.insertBefore(child，指定元素)

node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面

代码演示

<body>
    <ul>
        <li>1</li>
    </ul>
    <script>
        // 1.创建节点 createElement
        var li = document.createElement('li')
            // 2.添加节点 创建了节点要添加到某一个元素身上去 叫添加节点 node.appendChild(child) done 父级 child 子级 如果前面有元素了则在后面追加元素类似数组中的push依次追加
        var ul = document.querySelector('ul')
        ul.appendChild(li)
            // 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素
        var lili = document.createElement('li')
        ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个
            // 总结 如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素
    </script>
</body>

在这里插入图片描述
5.删除节点

node.removeChild(child)

node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子

代码演示

<body>
    <button>按钮</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>熊三</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul')
        var but = document.querySelector('button');
        // 2.删除元素
        // but.onclick = function() {
        //     ul.removeChild(ul.children[0])
        // }
        // 3.点击按钮键依次删除，最后没有删除内容了 就禁用按钮 disabled = true 禁用按钮语法
        but.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true
            } else {
                ul.removeChild(ul.children[0])
            }
        }
    </script>
</body>

在这里插入图片描述
6.复制节点(克隆节点)

node.cloneNode()

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

注意
1.如果括号参数为空或者为false，则是浅拷贝，只复制里面得标签，不复制内容
2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的内容

代码演示

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        // 2.复制元素 node.cloneNode()   如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制
        var lis = ul.children[0].cloneNode(true);
        // 3.获取元素
        ul.appendChild(lis)
    </script>
</body>

在这里插入图片描述
7.三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

区别

document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘
element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂
createElement()创建多个元素效率低一点点，但是结果更加清晰

总结：不同浏览器下,innerHTML效率要比createElement()高

代码演示

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // window.onload = function() {
        //         document.write('<div>123</div>');

        //     }
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>