Javascript之dom

最新推荐文章于 2024-05-17 01:18:21 发布
最新推荐文章于 2024-05-17 01:18:21 发布
阅读量1k 收藏 7
点赞数 3
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51767056/article/details/126082157
版权

1.🍊DOM简介

🍉 什么是DOM

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

🍉DOM树

在这里插入图片描述

2.🍊获取元素

🍉根据id获取

  • document.getElmentById(“id名”)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="time">2022</div>
    <script>
        // 因文档页面从上往下加载，故先得有标签，所以我们script写到标签下面
        // get获得element元素by通过驼峰命名法
        // 参数id是大小写敏感的字符串
        // 返回的是一个元素对象
        var timer = document.getElmentById("time");
        console.log(timer);
        console.log(typeof timer);
        // 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
</html>

🍉根据标签名获取

  • document.getElementsByagName(‘标签名’)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol id="ol">
        <li>6</li>
        <li>66</li>
        <li>666</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis); //返回的是 获取过来元素对象的集合 以伪数组的形式存储
        console.log(lis[0]);
        //遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //如果页面中只有一个li或者没有这个元素 返回的还是伪数组
        //element.getElementsByTagName('标签名');  父元素必须是单个对象
        //伪数组的形式，不能作为单个对象
        var ol = document.getElementsByTagName('ol')   //返回的是[ol]
        console.log(ol[0].getElementsByTagName('li')); //要指定某个元素
        //第二种写法
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

</html>

🍉 html5新增方式

  • 根据类名返回元素对象集合

document.getElementsByClassName(‘box’)

  • 根据指定选择器返回（切记符号）

返回指定选择器第一个元素–document.querySelector(‘.box’)

返回指定选择器的所有元素对象集合—document.querySelectorAll(‘.box’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <ul id="nav">
        <li>首页</li>
        <li>产品</li>
    </ul>
    <script>
        document.getElementsByClassName('box');//根据类名返回元素对象集合
        console.log('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);
        var allbox=document.querySelectorAll('.box'); //返回指定选择器的所有元素对象集合
        console.log(allbox);
    </script>
</body>
</html>

🍉 获取html和body标签

  • 获取html：document.body
  • 获取body标签：document.documentElement
<!DOCTYPE html>
<html lang="en">

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

<body>

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

</html>

3.🍊 事件基础

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

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

<body>
  <button id="btn">唐伯虎</button>
    <script>
    //点击一个按钮，弹出对话框
    //事件三要素 事件源（谁） 事件类型 事件处理对象  
    var btn=document.getElementById('btn');
    //事件类型 鼠标点击，经过
    //事件处理对象  通过一个函数赋值的方式完成
    btn.onclick = function(){
        alert('点秋香');
    }

    </script>

</body>

</html>

4.🍊操作元素

在这里插入图片描述

🍉 操作元素内容

  • innerText 与 innerHTML区别

     1.innerText不识别html标签 非标准
 2.innerHTML识别html标签  W3C标准 保留空格和换行
 3.这两个属性是可读写的 可以获取元素里面的内容

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

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

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件
        btn.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

    </script>

</body>

</html>

🍉 修改元素属性

  • src title href alt
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过操作元素img修改属性href src alt title </title>
    <style>
        img {
            width: 160px;
            height: 260px;
        }
    </style>
</head>

<body>
    <button id="jisoo">金智秀</button>
    <button id="rose">朴彩英</button><br>
    <img src="JS/images/1.webp" alt="">
    <script>
        //获取元素
        var jisoo = document.getElementById('jisoo');
        var rose = document.getElementById('rose');
        var img = document.querySelector('img');
        //注册事件
        rose.onclick = function () {
            img.src = 'JS/images/2.webp'
            img.title = 'rose';
        }
        jisoo.onclick = function () {
            img.src = 'JS/images/1.webp'
            img.title = 'jisoo';
        }

    </script>

</body>

</html>

在这里插入图片描述
在这里插入图片描述
表单元素的表单属性设置

  • type value disabled
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //注册事件
        btn.onclick = function () {
            //表单里的值，通过value来修改 而不是innerHTML
            input.value = '被点击了';
            //如果想要某个表单被禁用，this指向的是事件函数的调用者 btn
            this.disabled = true;
        }
    </script>
</body>

</html>

🍉 样式属性操作

我们可通过JS修改元素的大小，颜色，位置等
1.element.style 行内样式操作
2.element.className 类名样式操作

  • 注意：

    1.JS里面的样式采取驼峰命名法
    2.JS残剩的是行内样式，权重比较高
    3.如果样式修改较多，可以采取类名方式更改元素样式
    4.className因为是个保留字，因此使用className来操作类名属性
    5.className会直接更改元素的类名，会覆盖原先的类名

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素之修改样式属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: palegoldenrod;
        }
        .change{
            background-color: pink;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div></div>
    <p class="first">文本</p>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            this.style.backgroundColor = 'pink';
            this.style.width = '400px';
        }
        var p=document.querySelector('p');
        p.onclick=function(){
            this.className='change';
        }
    </script>
</body>

</html>

🍉显示隐藏文本框内容

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏文本框内容</title>
    <style>

    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        //获取元素
        var text = document.querySelector('input');
        //注册事件 获得焦点事件onfocus
        text.onfocus = function () {
            if (this.value === '手机') {
                this.value = '';
            }
            this.style.color = '#333';
        }
        //注册事件 失去焦点事件onblur
        text.onblur = function () {
            if (this.value === '') {
                this.value = '手机';
            }
        //失去焦点需要把文本框里面的文字颜色变成浅色
            this.style.color = '#999';
        }
    </script>
</body>

</html>

🍉排他思想

顺序不能颠倒，干掉所有人，留下我自己

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他思想</title>

</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    //获取所有元素
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            //先把所有的按钮背景颜色去掉
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            //后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';
        }
    }
</script>

</html>

🍉自定义属性

获取元素属性值
element.属性 
例如：div.id
element.getAttribute('属性')//自己定义的
设置元素属性值

主要针对自定义属性

（1）element.属性='值'
例如：(div.id=’test‘)
 (2)element.setAttribute('属性','值')
例如：div.setAttribute('index',2) div.setAttribute('class','footer')
移除属性
removeAttribute('属性') 
例如：div.removeAttribute('')

🍉H5自定义属性

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.getAttribute('getTime'));
    div.setAttribute('data-time',20);
    // 获取自定义属性
    console.log(div.getAttribute('data-index'));
    // dataset 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
    </script>
</body>
</html>

5.🍊节点操作

1.利用DOM提供的方法获取元素：逻辑性不强，繁琐
2.利用节点层级关系获取元素：逻辑性强，但是兼容性较差（更简单）

🍉父级节点

node.parentNode----(最近的一个父结点)

🍉子节点

parentNode.children—(返回所有的子元素节点)
返回第一个子结点:parentNode.firstChild
返回最后一个子结点:parentNode.lastChild

🍉兄弟节点

返回当前元素的下一个兄弟元素节点:node.nextSibling
返回当前元素的上一个兄弟元素节点:node.previousSibling

🍉创建,添加节点

我们想要页面添加一个新的元素分两步: 1. 创建元素 2. 添加元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>hh</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node（父级）  child（子级） 在后面追加元素  
        // 先获取父亲ul
        var ul = document.querySelector('ul');
        ul.appendChild(li);//创建的新的li
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>
</html>
🍉删除，复制节点
  • 返回删除的节点:

node.removeChild(child)

  • 复制节点(克隆节点):

node.cloneNode(true)
若括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点
若为false,则是浅拷贝，只复制节点本身，不克隆里面的子节点

小菜鸡2015
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 7038
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
Web前端最全从零开始学WEB前端——JavaScript-DOM操作，2024年最新字节跳动前端开发面试
2401_84438488的博客
05-17 259
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来。万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯。——杜甫《登高》⌨本文知识点DOM介绍获取节点通过ID获取用类名获取用CSS选择器获取用name属性获取用标签获取获取属性获取元素内容获取表单数据创建节点插入节点删除节点事件。
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 1050
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
JavaScript的DOM
rbx508780的博客
10-13 743
JavaScript的DOM ---DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3351
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
JavaScript之DOM事件（源代码）
05-31
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
JavaScript之DOM_动力节点Java学院整理
10-19
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
【JavaScript DOM操作】DOM（Document Object Model）是用于表示网页或文档的一种标准，它使得我们可以通过JavaScript等脚本语言对网页内容进行动态操作。本文主要介绍JavaScript中的DOM插入、更新和删除操作。 **1...
JavaScript dom操作 趣味案例
最新发布
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
Javascript之DOM讲解
每天都要努力学习哦~~
10-28 824
获取元素的方法 document.getElementById("id名") context.getElementsByTagName(''标签名') context.getElementsByClassName(") context.getElements.ByName(") document.head document.body document.documentElement context.querySelector("选择器") context.querySelectorAll.
JavaScript+DOM编程艺术（清晰中文版）.pdf
08-29
一本我喜欢的书
JavaScript中 DOM 的概念解释
norang的博客
06-04 1858
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JavaScript操作DOM常用的API
weixin_33725807的博客
05-10 130
1 什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。 文档对象模型 (DOM) 是对HTML文件的另一种展示，通俗地说，一个HTML 文件，我们可以用编辑器以代码的形式展示它，也可以用浏览器以页面的形式展示它，同一份文件通过不同的展示方式，就有了不一样的表现形式。...
Beautifulsoup
qq_42413820的博客
06-20 296
文中示例均使用下面的文档：html_doc = """ &lt;html&gt;&lt;head&gt;&lt;title&gt;The Dormouse's story&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &lt;p class="title"&gt;&lt;b&gt;The Dormo
JavaScript DOM的基本介绍
bleeding_sky的博客
02-26 309
前言 我们平常在web说的JavaScript其实是有三部分组成的 ECMAScript(JavaScript的核心模块) DOM(用于操作文档节点) BOM(用于操作浏览器) 而JavaScript是以ECMAScript规范作为核心模块，根据其宿主环境而创建出来的动态解释性脚本语言。 例如，在浏览器中的JavaScript语法和在Node使用的JavaScript语法有细微不同的（宿主环境...
【JavaScript学习总结】【5】、JS DOM
lily19970107的博客
10-09 69
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构，即节点树。通过 DOM，JS 可创建动态的 HTML，可以使网页显示动态效果并实现与用户的交互功能。JS 能够改变页面中所有的 HTML 元素、属性和 CSS 样式，并对页面中所有事件做出响应。所以学习 JS 的起点就是处理网页，处理网页就需要使用 DOM 进行操作。
JavaScript---Dom
m0_48860371的博客
08-29 159
dom
JavaScript中DOM
weixin_43466575的博客
04-05 233
1、DOM对象介绍 （1）什么是DOM DOM：Document Object Model，文档对象模型。 作用：是一套规范文档内容的通用型标准。 （2）DOM HTML节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。 文档（Document）表示HTML文件。 文档中的标签称为元素（Element）。 文档中的所有内容称为节点（Node）。 因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。 <!DOCTYPE html> &lt

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值