前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些 css 样式
...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签,我们通过 js 获取到以后,就把这个对象叫做 DOM 对象
获取一个元素
- 通过 js 代码来获取页面中的标签
- 获取到以后我们就可以操作这些标签了
- getElementById 是通过标签的 id 名称来获取标签的
- 因为在一个页面中 id 是唯一的,所以获取到的就是一个元素
getElementById
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div> </script></body>
- 获取到的就是页面中的那个 id 为 box 的 div 标签
- getElementsByClassName 是用过标签的 class 名称来获取标签的
- 因为页面中可能有多个元素的 class 名称一样,所以获取到的是一组元素
- 哪怕你获取的 class 只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
getElementsByClassName
<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 是用过标签的 标签 名称来获取标签的
- 因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
- 哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
getElementsByTagName
<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 是按照选择器的方式来获取元素
- 也就是说,按照我们写 css 的时候的选择器来获取
- 这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
querySelector
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 元素的属性,就能直接把效果展示在页面上
- 获取元素内部的 HTML 结构
操作属性
innerHTML
<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 元素
- 获取元素内部的文本(只能获取到文本内容,获取不到 html 标签)
innerText
<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>
- 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM相关推荐
- 前端获取div里面的标签_「HTML」什么是 HTML 中的 div 标签
1:语法 2:作用 div 标签可以用来划分 HTML 结构,从而配合 CSS 来整体控制某一块的样式. div 标签是块级元素,它可用做组合其它 HTML 元素的容器. div 标签可以用作严格的组 ...
- 零基础学前端之HTML全套基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 HTML全套基础教程[学习笔记] 1.系统结构 2.软件环境准备 3.HTML概述 4. 我的第一个HTML 5. HTML的基本标签 6.HTML的实体符号 7. ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- php获取扫码枪的内容,一起看看js获取扫码枪输入数据的方法_WEB前端开发
代码详解Vue中key的作用示例_WEB前端开发 key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes,这篇文章主要给大家介绍Vue中key的作用,感兴 ...
- web前端开发技术现状与发展_Web前端的发展前景、最新技术、学习路线?
1.前景怎么样? web前端人才需求还会持续增加 据国内权威数据统计,未来五年,我国信息化人才总需求量高达1500万-2000万人.其中"网络工程""UI设计" ...
- 前端面试技巧和注意事项_web前端没有项目经验怎么应对面试?(技巧) -
thinkphp开发的一个项目,登录成功后又跳转到登录页面,在提交信息后输出session都是正常的,没有问题,但是页面跳转后,session出现丢失现象,无法正常完成登陆.通过查找资料,发现原来是b ...
- 【前端学习笔记DOM—DOM常见操作】
目录 前言 一.什么是DOM 二.常见的DOM操作 1.增 (1)新建 (2)插入 2.删 (1)删除子节点 (2)删除属性节点 3. 改 (1)替换节点 (2)修改属性值 4. 查 (1)通过id属 ...
- 零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...
- java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
最新文章
- c# 修饰词public, protected, private,internal,protected的区别
- eigrp 重分布默认路由
- Windows环境:VMware下linux虚拟机与Windows主机进行文件共享的方法
- [转]C++中sleep()函数的使用
- 查询工资最低的3名员工的职工工号、姓名和收入_关于工资条,这6个常识必须掌握,事关你的权益!...
- require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件(五)
- Java工程师学习指南 中级篇
- c++字符串数组去重的另类思路
- java一维数组求质数_Java数组中最大质数和最小质数之间的差异
- 电感的饱和电流 均方值电流 额定电流的认识
- 计算机办公软件应用实训,办公软件office实训计划
- Kerberos安装及使用2(Kerberos服务器KDC安装及配置)
- 免疫组库数据分析(三):免疫组库数据可视化
- Linux的LVM磁盘卷轴深度学习
- 一缕黑暗中的火光-----------类图--------------优雅的建模语言
- 数字图像隐藏图像的两种算法及实现代码
- 计算机音乐念诗之王,念诗之王怎么做出来的 念诗之王完整顺口溜
- 概念建模(CDM)-------数据建模(一)
- mongoDB Atlas
- ffmpeg 缩放算法_抖音快手短视频分屏怎么做?ffmpeg scale过滤器了解下
热门文章
- SAP中内部订单和PS的区别
- 谷歌为何要大力投资生命科学初创公司?
- 不需要SAP请求号修改程序的方法
- Smartform下載PDF
- 聚焦2020年财报:进击的恒大汽车,“变态”的智能汽车
- 计算机一级挂科率,[转]计算机一级难吗?看了它想挂科,难难难难把此(精)
- html5语义化布局分割代码,HTML5语义化标签布局的兼容性.html
- 龙芯linux内核移植开发板,基于国产龙芯GS32I的开发板的设计与嵌入式Linux的移植...
- CTF-压缩包套娃爆破脚本
- python基础入门:while 循环