好程序员web前端培训JavaScript学习笔记 DOM一
sinye56 2024-10-27 14:11 2 浏览 0 评论
好程序员web前端培训JavaScript学习笔记 DOM一DOM（Document Object Model）： 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些 css 样式
...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
获取一个元素
· 通过 js 代码来获取页面中的标签
· 获取到以后我们就可以操作这些标签了
getElementById
· getElementById 是通过标签的 id 名称来获取标签的
· 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div> </script></body>
· 获取到的就是页面中的那个 id 为 box 的 div 标签
getElementsByClassName
· getElementsByClassName 是用过标签的 class 名称来获取标签的
· 因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素
· 哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
· 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是伪数组
· 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个 div，需要用索引来获取
getElementsByTagName
· getElementsByTagName 是用过标签的 标签 名称来获取标签的
· 因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素
· 哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
· 和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素
· 必须要用索引才能得到准确的 DOM 元素
querySelector
· querySelector 是按照选择器的方式来获取元素
· 也就是说，按照我们写 css 的时候的选择器来获取
· 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
querySelectorAll
· querySelectorAll 是按照选择器的方式来获取元素
· 这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
· 获取到的是一组数据，也是需要用索引来获取到准确的每一个 DOM 元素
操作属性
· 通过我们各种获取元素的方式获取到页面中的标签以后
· 我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上
innerHTML
· 获取元素内部的 HTML 结构
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
?
<script>
var div = document.querySelector('div')
console.log(div.innerHTML)
/* <p> <span>hello</span> </p> */
</script></body>
· 设置元素的内容
<body>
<div></div>
?
<script>
var div = document.querySelector('div')
div.innerHTML = '<p>hello</p>'
</script></body>
· 设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素
innerText
· 获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
?
<script>
var div = document.querySelector('div')
console.log(div.innerText) // hello </script></body>
· 可以设置元素内部的文本
<body>
<div></div>
?
<script>
var div = document.querySelector('div')
div.innerText = '<p>hello</p>'
</script></body>
· 设置完毕以后，会把 <p>hello</p> 当作一个文本出现在 div 元素里面，而不会把 p 解析成标签
getAttribute
· 获取元素的某个属性（包括自定义属性）
<body>
<div a="100" class="box"></div>
?
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script></body>
setAttribute
· 给元素设置一个属性（包括自定义属性）
<body>
<div></div>
?
<script>
var div = document.querySelector('div')
div.setAttribute('a', 100)
div.setAttribute('class', 'box')
console.log(div) // <div a="100" class="box"></div> </script></body>
removeAttribute
· 直接移除元素的某个属性
<body>
<div a="100" class="box"></div>
?
<script>
var div = document.querySelector('div')
div.removeAttribute('class')
console.log(div) // <div a="100"></div> </script></body>
style
· 专门用来给元素添加 css 样式的
· 添加的都是行内样式
<body>
<div></div>
?
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
// <div style="width: 100px; height: 100px; background-color: pink;"></div> </script></body>
· 页面中的 div 就会变成一个宽高都是100，背景颜色是粉色
className
· 专门用来操作元素的 类名的
<body>
<div class="box"></div>
?
<script>
var div = document.querySelector('div')
console.log(div.className) // box </script></body>
· 也可以设置元素的类名，不过是全覆盖式的操作
<body>
<div class="box"></div>
?
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div> </script></body>
· 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
相关推荐
- RHEL8和CentOS8怎么重启网络
-
本文主要讲解如何重启RHEL8或者CentOS8网络以及如何解决RHEL8和CentOS8系统的网络管理服务报错，当我们安装好RHEL8或者CentOS8，重启启动网络时，会出现以下报错：...
- Linux 内、外网双网卡路由配置
-
1.路由信息的影响Linux系统中如果有多张网卡的情况下，如果路由信息配置不正确，...
- Linux——centos7修改网卡名
-
修改网卡名这个操作可能平时用不太上，可作为了解。修改网卡默认名从ens33改成eth01.首先修改网卡配置文件名（建议将原配置文件进行备份）...
- CentOS7下修改网卡名称为ethX的操作方法
-
?Linux操作系统的网卡设备的传统命名方式是eth0、eth1、eth2等，而CentOS7提供了不同的命名规则，默认是基于固件、拓扑、位置信息来分配。这样做的优点是命名全自动的、可预知的...
- Linux 网卡名称enss33修改为eth0
-
一、CentOS修改/etc/sysconfig/grub文件（修改前先备份）为GRUB_CMDLINE_LINUX变量增加2个参数（net.ifnames=0biosdevname=0），修改完成...
- CentOS下双网卡绑定，实现带宽飞速
-
方式一1.新建/etc/sysconfig/network-scripts/ifcfg-bond0文件DEVICE=bond0IPADDR=191.3.60.1NETMASK=255.255.2...
- linux 双网卡双网段设置路由转发
-
背景网络情况linux双网卡:网卡A(ens3)和网卡B(...
- Linux-VMware设置网卡保持激活
-
Linux系统只有在激活网卡的状态下才能去连接网络，进行网络通讯。修改配置文件（永久激活网卡）...
- VMware虚拟机三种网络模式
-
01.VMware虚拟机三种网络模式由于linux目前很热门，越来越多的人在学习linux，但是买一台服务放家里来学习，实在是很浪费。那么如何解决这个问题？虚拟机软件是很好的选择，常用的虚拟机软件有v...
- 2023年最新版 linux克隆虚拟机 解决网卡uuid重复问题
-
问题描述1、克隆了虚拟机，两台虚拟机里面的ip以及网卡的uuid都是一样的2、ip好改，但是uuid如何改呢？解决问题1、每台主机应该保证网卡的UUID是唯一的，避免后面网络通信有问题...
- Linux网卡的Vlan配置，你可能不了解的玩法
-
如果服务器上连的交换机端口已经预先设置了TRUNK,并允许特定的VLAN可以通过，那么服务器的网卡在配置时就必须指定所属的VLAN，否则就不通了，这种情形在虚拟化部署时较常见。例如在一个办公环境中，办...
- Centos7 网卡绑定
-
1、切换到指定目录#备份网卡数据cd/etc/sysconfig/network-scriptscpifcfg-enp5s0f0ifcfg-enp5s0f0.bak...
- Linux搭建nginx+keepalived 高可用(主备+双主模式)
-
一：keepalived简介反向代理及负载均衡参考：...
- Linux下Route 路由指令使用详解
-
linuxroute命令用于显示和操作IP路由表。要实现两个不同子网之间的通信，需要一台连接两个网络的路由器，或者同时位于两个网络的网关来实现。在Linux系统中，设置路由通常是为了解决以下问题：该...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- linux进程通信 (63)