前端 BOM和DOM操作
2022/2/14 23:46:05
本文主要是介绍前端 BOM和DOM操作,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
内容概要
- BOM和DOM操作
- DOM操作之查找标签
- DOM操作之操作标签
内容详细
BOM和DOM操作
BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面
BOM操作
window.open() - 打开新窗口 window.close() - 关闭当前窗口 history.forward() // 前进一页 history.back() // 后退一页 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 setTimeout() clearTimeout() setInterval() clearInterval()
DOM操作之查找标签
前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集 """ 如果我们的js代码需要页面上某个标签加载完毕 那么该js代码应该写在body内部最下方或者引入外部js文件 """ # 间接查找(重要) parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
节点操作
var aEle = document.createElement('a'); # 创建标签 aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性 aEle.innerText = '好不好看?' # 设置内容文本 document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加 """一定要明确当前手上是什么对象""" imgEle.getAttribute('title') # 获取标签属性 innerText 不加赋值符号是获取内部文本 加了赋值符号是设置内置文本 # 不可以识别HTML标签 innerHTML 不加赋值符号是获取内部标签+文本 加了赋值符号是设置内置标签+文本 # 可以识别HTML标签
获取值操作
# 普通的文本数据获取 标签对象.value # 特殊的文件数据获取 标签对象.value '''仅仅获取一个文件地址而已''' 标签对象.files[0] '''获取单个文件数据''' 标签对象.files '''获取所有文件数据'''
class操作
classList 查看所有的类 classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true,否则返回false classList.toggle(cls) 存在就删除,否则添加
样式操作
标签对象.style.属性名 = 属性值
事件
# 就是给HTML元素添加自定义的功能 绑定事件的方式1 <button onclick="func()">点我</button> <script> function func() { alert(123) } </script> 绑定事件的方式2 <button id="d1">选我</button> <script> // 1.先查找标签 var btnEle = document.getElementById('d1') // 2.绑定事件 btnEle.onclick = function () { alert(456) } </script> # 如果某个标签已经有事件了 那么绑定会冲突
内置参数this
# this指代的就是当前被操作对象本身 在事件的函数体代码内部使用 btnEle.onclick = function () { alert(456) console.log(this) }
这篇关于前端 BOM和DOM操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01前端项目部署入门:新手必读指南
- 2024-11-01富文本编辑器学习:从入门到初步掌握
- 2024-11-01前端项目部署学习:从入门到实践
- 2024-11-01动态主题处理:WordPress新手指南
- 2024-11-01前端项目部署指南:从零开始的部署教程
- 2024-11-01Element-Plus入门指南:轻松开始你的前端项目
- 2024-11-01TagsView标签栏导航入门教程
- 2024-11-01富文本编辑器课程:新手入门教程
- 2024-10-31前端项目部署课程:从入门到实践指南
- 2024-10-31用Angular实现服务器端渲染以提升SEO效果