DOM 重点核心 dom节点事件操作

最新推荐文章于 2022-09-17 15:02:22 发布

Yolo416

最新推荐文章于 2022-09-17 15:02:22 发布

阅读量143

点赞数

分类专栏：前端基础文章标签： javascript

本文链接：https://blog.csdn.net/m0_50125215/article/details/116009325

版权

前端基础专栏收录该内容

59 篇文章 2 订阅

订阅专栏

关于dom操作，我们主要针对元素的操作。主要有创建，增，改，查，属性操作，事件操作。

DOM节点介绍

1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本）
2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法）
3.HTML标签属于节点的一种，叫做元素节点
4.节点三要素：
- 节点类型：标签、属性、注释、文本，nodeType
- 节点名称：p、div、class（属性名），nodeName
- 节点的值：one（属性的值），nodeValue

在这里插入图片描述

1.创建元素三种方式介绍

document.write
innerHTML
createElement

1.document.write():慎用，可能会覆盖原本内容
- 解析字符串识别标签
2.innerHTML：创建元素过多时（100以内可以忽略），会损耗性能
- 解析字符串识别标签
- 直接赋值元素.innerHTML 会替换原本内容，如果不想替换使用 += 拼接
3.document.createElement()：dom推荐方式
- 动态创建一个dom对象（空标签，需要自己设置属性）在内存中
- 需要使用appendChild来添加到HTML
document.write():慎用，因为可能会覆盖原本的内容
- 覆盖内容的原理了解即可：编译器从上往下解析HTML的时候会形成一个文档流，这个文档流会在文档所有的HTML标签解析后关闭。不会覆盖的情况：如果在关闭这个文档流之前调用document.write()，则不会覆盖会覆盖的情况：如果在关闭文档流之后调用document.write()，会开启一个新的文档流，此时会把上一个文档流中的内容覆盖

<!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>

    <button onclick="document.write('<p>我是马云6666</p>');">点我有惊喜</button>

    <script>

        //1.document.write()
        //不常用，因为可能会覆盖网页原先的内容
        /*覆盖原理
        1.当html文件加载的时候，浏览器会生成一个默认文档流，当页面全部加载完毕之后默认文档流会完毕。
        如果此时调用 document.write()浏览器会生成一个新的文档流，重新渲染页面
        2.不会覆盖：  在默认文档流没有关闭之前调用 document.write()
        3.会覆盖：  在默认文档流关闭之后调用 document.write()
        
         */
        document.write('<p>我是马云</p>');

        //2.innerHTML ： 少用，存在性能问题（100以内忽略不计）
        //直接赋值会替换原有的内容
        // document.body.innerHTML = '<div>黑马程序员</div><a href="#">我是链接</a>';
        //如果希望添加，可以使用字符串连接符
        //  document.body.innerHTML += '<div>黑马程序员</div><a href="#">我是链接</a>';

        //3. dom推荐方式： createElement


        /*
        参数：标签名字符串
        返回值：元素节点
        特点： （1）创建出来的元素只是在内存中，并没有显示到页面中，需要手动添加
                （2）创建出来的是空标签
         */

        // (1) 创建空元素
        // let box = document.createElement('div');
        // (2) 添加属性
        // box.id = 'box';
        // box.innerText = '我是新来的div';
        // (3) 添加到页面
        // document.body.appendChild(box);

    </script>
</body>

</html>

2.增

appendChild
insertBefore

3.删移除子元素：removeChild()

removeChild:移除子元素语法：

父元素.removeChild(子元素)

1.不能自己移除自己（只能让爸爸干掉自己）
2.父元素只能移除自己的子元素，不能移除别人的子元素（只有亲爸爸才能干掉自己）

4.改

在这里插入图片描述

5.查

在这里插入图片描述

6.属性操作

在这里插入图片描述

7.事件操作

在这里插入图片描述

8.dom增删改页面元素

语法	示例	描述
document.createElement()	document.createElement(‘li’)	创建空标签元素
父元素.appendChild(子元素)	ul.appendChild(li)	添加子元素
父元素.insertBefore(子元素)	ul.insertBefore(元素A，元素B)	将元素A插入到元素B的前面
父元素.replaceChild(子元素)	ul.replaceChild(元素A，元素B)	元素A替换元素B
父元素.removeChild(子元素)	ul.removeChild(li)	移除子元素

9.克隆元素：cloneNode( )

cloneNode：克隆元素语法：

元素.cloneNode(布尔)
	false：默认，浅克隆
	true：深克隆

1.克隆目标元素
2.可能分为两种
- 浅克隆：只克隆元素本身，不包含子节点（文本、元素）
- 深克隆：克隆元素本身以及其子节点（文本、元素）

Yolo416

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DOM 重点核心 dom节点事件操作

关于dom操作，我们主要针对元素的操作。主要有创建，增，改，查，属性操作，事件操作。1.创建document.writeinnerHTMLcreateElement2.增appendChildinsertBefore3.删4.改5.查6.属性操作7.事件操作...
复制链接

扫一扫