DOM的核心总结

最新推荐文章于 2022-10-20 10:02:38 发布

MyikJ

最新推荐文章于 2022-10-20 10:02:38 发布

阅读量255

点赞数 1

文章标签： js javascript html5 html

本文链接：https://blog.csdn.net/weixin_48893653/article/details/115603463

版权

一：DOM（Document Object Model）,是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。

对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。
对于HTML,DOM使得HTML形成一颗DOM树，包含文档、元素、节点。
关于DOM的操作，我们主要针对元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

二：创建元素

1.document.write()

document.write("<h1>123</h1>")

弊端：当整个页面的文档流加载完毕之后，再去执行这个操作会导致页面重绘。

		// 获取普通按钮元素对象
 		var btn = document.querySelector('button');
 		// 绑定单击事件
        btn.onclick = function(){

            document.write('<div>123</div>');
        }

2.document.innerHTML

var inner = document.querySelector('.inner');
inner.innerHTML = '<a href="#">百度</a>'

3.document.createElement()

var create = document.querySelector('.create');
var a = document.createElement('a');

4.区别：

当创建元素的次数较多时，采取document.createElement()创建元素的效率高于其他。
针对document.innerHTML可以进行优化，采取数组拼接的方式效率高于其他。如果采取字符串拼接的方式效率会略差。

 // 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('');

三：增加元素

1.增加元素的三要素

首先要创建一个新的元素对象
其次要获取到父元素对象
最后将新元素对象追加到父元素对象中

2.document.appendChild():在末尾追加元素

 // 1.我们先得有一个元素，创建一个元素
        var li = document.createElement('li');
        // 2.将元素追加到ul中
        // 需要获取父元素ul
        var ul = document.querySelector('ul');
        ul.appendChild(li);

3.document.insertBefore():在头部添加元素

		// 3.也可以在前面添加元素
        // 再次创建一个li元素
        var lili = document.createElement('li');
        // 添加到元素内容为123li得前面
        ul.insertBefore(lili,ul.children[0]);

四：删除元素

1.document.removeChild()：删除父元素中的子元素

		// 1.获取父节点ul对象
        var ul = document.querySelector('ul');
        // 2.调用方法进行删除
        ul.removeChild(ul.children[0]);

五：修改元素的内容，属性，表单的值等

1.修改元素属性：src、herf、title等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素之修改元素属性</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">

    <script>
        // 点击按钮，切换图片
        
        // 1.获取元素对象
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');

        // 绑定事件，处理事件程序
        zxy.onclick = function(){
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }

        ldh.onclick = function(){
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
        
    </script>
</body>
</html>

2.修改普通元素内容：innerText、innerHTML
区别：

相同点：它两都可以进行读写操作，既可以改变元素的内容，也可以获取元素的内容

 <p>
        123
        <span>嘻嘻哈哈</span>
    </p>
    <script>
    // 获取p标签中的内容
        var p = document.querySelector('p');
        console.log(p.innerText);       // 去除了html标签和换行、空格
        console.log(p.innerHTML);       // 保留了html标签、换行、空格
    </script>

不同点：
1.innerText：获取元素内容时去除了元素内容的html标签，
也去除了所有的换行和空格
非标准的
2.innerHTML: 获取元素内容时不会去除html标签、换行、空格。
W3C标准的（开发中常用这个）

 var div = document.querySelector('div');
 // 发现innerText不会识别html标签
 div.innerText = '<strong>2021-2-21</strong>';
  // innerHTML会识别html标签
 // div.innerHTML = '<strong>2021-2-21</strong>';

3.修改表单元素:表单中标签比较特殊，想要改变内容使用value属性(document.value)、想要改变文本框的类型使用type属性(document.type)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素之表单属性设置</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(){
            // 3.修改文本框中的内容
            // input.innerHTML = '内容变了';  这样的写法是错误的，innerHTML只能操作一个普通的标签

            // 表单中的标签比较特殊，想要改变内容使用value属性
            input.value = '内容变了';

            // 点击一次之后，禁用点击
            // btn.disabled = true;

            this.disabled = true;
            // this只当前事件的调用者，就是按钮 

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

4.修改元素样式:style、className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素之修改样式属性</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 需求：点击盒子，改变颜色和大小
        // 注意：js修改style样式的操作，产生的是行内式样式，所以权重比内嵌式高
        // 获取元素对象
        var div = document.querySelector('div');

        // 注册事件，处理程序
        div.onclick = function(){
            // 修改样式
            this.style.backgroundColor = 'purple';
            this.style.width = '300px';
        }
    </script>
</body>
</html>

六：查找元素

1.DOM提供的API方法：document.getElementById()、document.getElementsByTagName()。
2.H5新提供的方法：document.getElementByClassName()、document.querySelector()、document.querySelectorAll()。
3.利用节点操作获取元素对象：父(parentNode)、子(children)、兄弟(nextElementSibling、previousElementSibling)。

七：属性操作

1.获取属性值的两种方式

element.属性名

 var div = document.querySelector('div');
 console.log(div.id);

element.getAttribute(‘属性名’)

var div = document.querySelector('div');
console.log(div.getAttribute('id'));

问题：两种获取属性值的方式有什么区别呢？

element.属性名只可以获取元素自带的属性的属性值（元素内置的属性）
element.getAttribute(‘属性名’)可以获取程序猿自定义的属性的属性值

<div id="demo" index="1" class="navs"></div>
<script>
 var div = document.querySelector('div');
   console.log(div.getAttribute('index'));
</script>

2.设置属性的值也有两种方式

element.属性名 = ‘’"

var div = document.querySelector('div');
div.id = 'test';
// 修改class得属性值比较特殊
div.className = 'head';

element.setAttribute(‘属性名’,属性值)

var div = document.querySelector('div');
div.setAttribute('class','fotter');
div.setAttribute('index',2);

3.移除元素的属性：element.removeAttribute(’属性名‘)

var div = document.querySelector('div');
div.removeAttribute('index');

4.H5自定义属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5自定义属性</title>

</head>

<body>
    <div getTime='time' data-index='1' data-index-time='10'></div>
    <script>
        /*
            1.自定义属性是我们程序猿自己定义的，可以用来存储数据和使用数据。（有些数据不用存储到数据库当中）
            2.既然是程序猿自己的定义的属性，那么一定要有一个规范，不然在开发当中谁会知道这是元素自带的属性还是程序猿自定义的属性
            3.这种规范是:data-属性名，可以使用多个-连接

        */
        // 获取div元素对象
        var div = document.querySelector('div');

        // 2.获取getTime的属性值
        console.log(div.getTime);        // undifined
        console.log(div.getAttribute('getTime'));
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-index-time'));

        // 3.H5新增的获取属性的方式：只能获取data- 的自定义的属性。还要注意兼容性
        console.log(div.dataset);
        // 3.1  element.dataset.属性名
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 3.2  element.dataset['属性名']:属性名采用小驼峰命名的方法获取
        console.log(div.dataset.indexTime);
        console.log(div.dataset['indexTime']);
    </script>
</body>

</html>

八：事件操作

1.事件三要素：事件源、事件类型、事件处理程序

事件源：事件被触发的对象谁–》按钮
事件类型：鼠标点击、鼠标经过、键盘按下……
事件处理程序：通过一个函数赋值的方式完成（匿名函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件三要素</title>
</head>
<body>
    <button id="btn">唐伯虎</button>
    <!-- 
        事件三要素:事件源 事件类型 事件处理程序
        1.事件源:事件被触发的对象 谁--》 按钮
        2.事件类型：鼠标点击、鼠标经过、键盘按下……
        3.事件处理程序：通过一个函数赋值的方式完成（匿名函数）
     -->

     <script>
         // 1.先获取按钮对象
         var btn = document.getElementById('btn');

         // 2.绑定单击事件
         btn.onclick = function(){
             // 3.事件处理程序
             alert('点秋香！');
         }
     </script>
</body>
</html>

2.执行事件的步骤

首先要获取事件源
然后注册事件
编写处理事件程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>执行事件步骤</title>
</head>
<body>
    <div>123</div>

    <script>
        // 获取事件源
        var div = document.querySelector('div');
        // 注册单击事件（或绑定单击事件）
        // div.onclick;
        // 处理事件程序
        div.onclick = function(){
            console.log('我被点击了！');
        }
    </script>
</body>
</html>

MyikJ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM的核心总结

一：DOM（Document Object Model）,是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。对于HTML,DOM使得HTML形成一颗DOM树，包含文档、元素、节点。关于DOM的操作，我们主要针对元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。二：创建元素1.document.write()document
复制链接

扫一扫