您的位置：首页 > Web前端

04 前端之BOM与DOM

2022-02-11 16:18 615 查看

[toc]

前端之BOM与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   上一个兄弟标签元素

快速书写代码：
div#d$*3       div就是标签   #就是id   d就是d1的d   $就是数字   *3就是三行
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

div.c$*3	   div就是标签   .就是class   c就是c1的c   $就是数字   *3就是三行
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

节点操作

var aEle = document.createElement('a');  # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
aEle.innerText = '好不好看?'  # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加
"""一定要明确当前手上是什么对象"""

var imgEle = document.createElement('img')
imgEle.src = 'https://img1.baidu.com/...  图片地址  '
pEle.append(imgEle)
imgEle.getAttribute('src')  # 获取标签的图片地址
imgEle.getAttribute('title')  # 获取标签属性
'''但是getAttribute()  无法获取实时的数据信息'''

innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
# 可以识别HTML标签

获取值操作

获取值：用户在页面上写了数据（form）了，怎么获取用户写的数据呢，用户输入什么就获取什么。

在form表单情况下进行
input标签，在页面中，用户是输入文本框中，输入的就是V值，即value。
# 普通的文本数据获取
前文说到getAttribute()无法获取实时的数据，但是#下面的方法可以。
eg：ipEle.value   >  jason666
标签对象.value
# 特殊的文件数据获取
在'input'标签属性是'file'时：
1.标签对象.value  '''仅仅获取一个文件地址而已'''
eg：ipEle.value   >  C:\\admin\\python\\day
2.标签对象.files[0]  '''获取单个文件数据对象'''
eg：ipEle.files[0]  >  File {...} 文件信息
3.标签对象.files  '''获取所有文件数据'''
标签属性添加 multaple

class操作

classList  查看所有的类
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

Console:
var d2Ele = document.getElementById('d2')
d2Ele.style.backgroundColor = 'red'
var d2Ele = document.getElementsByTagName('p')[0]
d2Ele.style.backgroundColor = 'green'

样式操作

标签对象.style.属性名 = 属性值

事件

# 就是给HTML元素添加自定义的功能
绑定事件的方式1 (不常用，不建议使用)
<body>
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
</body>

绑定事件的方式2	# 使用最多，推荐使用
<body>
<button id="d1">选我</button>
<script>
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
</body>

内置参数this

# this指代的就是当前被操作对象本身
在事件的函数体代码内部使用，
btnEle.onclick = function () {
alert(456)
console.log(this)
}

事件练习

input里面只有 value， 没有innertext

onclick单击事件
onfocus聚焦事件
onblur失去焦点事件
onchange文本域变化事件
onload等待...加载完毕后执行的事件
# 定时器
# 数据校验
# 省市联动

如果某个标签已经有事件了那么绑定会冲突

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航