时间戳

首页 > 技术文章 > 04 前端之BOM与DOM

04 前端之BOM与DOM

panda-xin 2022-02-11 16:18 原文

目录

前端之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等待...加载完毕后执行的事件
# 定时器
# 数据校验
# 省市联动

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

推荐阅读