BOM与DOM操作

go&Python

已于 2022-02-14 19:05:49 修改

阅读量1k

点赞数 1

分类专栏：杂七杂八系列文章标签：前端 javascript html5

于 2022-02-14 18:51:11 首次发布

本文链接：https://blog.csdn.net/qq_55752792/article/details/122930175

版权

杂七杂八系列专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型）操作，包括window对象的方法如open、close、history和location的使用，screen、navigator对象的属性，以及弹出框和计时器的实现。此外，还讲解了DOM操作，如查找、创建、删除和修改HTML元素，以及事件处理。最后，通过实例展示了如何使用定时器和DOM操作实现动态效果。

摘要由CSDN通过智能技术生成

BOM与DOM操作

什么是BOM和DOM

BOM指浏览区对象模型，能使js通过它操作浏览器
DOM指文档对象模型，能使js通过它操作前端页面(即HTML文档的所有元素)

BOM需要掌握操作

window.open() 				- 打开新窗口
window.close() 				- 关闭当前窗口
history.forward()  			// 前进一页
history.back()  			// 后退一页
location.href  				获取URL
location.href="URL" 		// 跳转到指定页面
location.reload() 			重新加载页面


setTimeout()
clearTimeout()
setInterval()
clearInterval()

windows对象

所有浏览器都支持 window 对象。它表示浏览器窗口

常用的window方法有:

window.innerHeight - 显示浏览器窗口的内部高度
window.innerWidth - 显示浏览器窗口的内部宽度

window.open(url, [name], [configuration]) - 打开新窗口

window.open()三个参数,url是必须的是新打开页面的链接地址
name为新打开窗口的名字，可以通过此名字获取该窗口对象
configuration：为新打开窗口的一些配置项，比如是否有菜单栏、滚动条、长高等等信息
ps:
	window.open("https://www.baidu.com", "newWindow", "width=1024, height=700, top=0, left=0, titlebar=no, menubar=no, scrollbars=yes, resizable=yes, status=yes, , toolbar=no, location=yes");

window.close() - 关闭当前窗口

windows的子对象

navigator对象(了解)

浏览器对象，通过这个对象能够判断用户所使用的浏览器，包含了浏览器的相关信息

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

在这里插入图片描述

screen对象

屏幕对象，不常用。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

history对象

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

三种弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

// 警告框 alert
	alert('警告内容');
// 确认框 confirm
	confirm('待确认内容')  // 有返回值，根据确认返回true或false
// 提示框  prompt
	prompt('提示内容','默认信息')  // 有返回值，返回用户输入信息

计时相关

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()
	var t=setTimeout(命令,毫秒)  // 多少毫秒后执行JS语句
    
clearTimeout()
	clearTimeout(t)		// 取消上方计时任务

setInterval()
	setInterval(命令,时间间隔)   // 每隔多久执行一次JS语句

clearInterval()   方法可取消由 setInterval() 设置的 timeout。	

// 命令可以是  'js语句'  ps: 'alert("123")'  也可以是 函数   ps:
	function func1(){}
	var t = setTimeout(func1,3000)

在这里插入图片描述

BOM需要掌握操作

HTML DOM 树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM操作之查找标签

关键字document

// 基本查找(核心)
document.getElementById   			根据ID获取一个标签
document.getElementsByClassName 	 根据class属性获取
document.getElementsByTagName		 根据标签名获取标签合集

// 间接查找
parentElement			 父节点标签元素
children				所有子标签
firstElementChild		 第一个子标签元素
lastElementChild		 最后一个子标签元素
nextElementSibling		 下一个兄弟标签元素
previousElementSibling	 上一个兄弟标签元素

在这里插入图片描述

节点操作

创建节点

语法: createElement(标签名)

ps : var divEle = document.createElement(“div”)
添加节点
追加一个子节点（作为最后的子节点）
- somenode.appendChild(newnode)； // somenode 指获得的节点
把增加的节点放到某个节点的前边。
- somenode.insertBefore(newnode,某个节点);
ps：
```
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
```
删除节点

语法: somenode.removeChild(要删除的节点)
替换节点

语法：somenode.replaceChild(newnode, 某个节点);

节点属性与值操作

获取文本节点的值:

var divEle = document.getElementById("d1")

divEle.innerText   // 获取文本内容
divEle.innerText = '好的很'  // 设置文本内容

divEle.innerHTML   // 获取节点内的标签和文本
divEle.innerHTML="<p>2</p>"  // 设置标签和文本

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

设置文本节点的属性(attribute操作)

var divEle = document.getElementById("d1")
divEle.setAttribute("age",18)  // 设置属性
divEle.getAttribute("age")		// 获取属性
divEle.removeAttribute("age")	// 删除属性

获取值操作

语法：

elementNode.value

适用于以下标签：

.input
.select
.textarea

// 普通的文本数据获取
	标签对象.value
// 特殊的文件数据获取
	标签对象.value  '''仅仅获取一个文件地址而已'''
    标签对象.files[0]  '''获取单个文件数据'''
    标签对象.files  '''获取所有文件数据'''

在这里插入图片描述

class的操作

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

注: 只能获取本文本内的class属性，不能跨文本获取

指定css操作

obj.style.backgroundColor="red"
标签对象.style.属性名 = 属性值

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

// 事件就是给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)
        }

案例:

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         等待某些东西完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

在这里插入图片描述

定时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id = 'd1'>
    <button id = 'd2'>开始</button>
    <button id = 'd3'>暂停</button>
    <button id = 'd4'>清空</button>

    <script>
        // 1.先找到按钮
        var iEle = document.getElementById('d1')
        var but1Ele = document.getElementById('d2')
        var but2Ele = document.getElementById('d3')
        var but3Ele = document.getElementById('d4')
        var t = null
        // 3.构造一个在文本框中显示时间的函数
        function showTime() {
            // 获取当前时间
            var cTime = new Date().toLocaleString()
            // 把时间显示在文本框中
            iEle.value = cTime
        }
        // 2.绑定开始按钮
        but1Ele.onclick = function () {
            // 防止重复执行定时任务
            if (!t){
            // 执行循环定时任务
            t = setInterval(showTime,999)
            }
        }
        // 4.绑定暂停按钮
        function func1() {
            // 中止定时任务
            clearInterval(t)
            t = null
        }

        but2Ele.onclick = func1
        // 5. 绑定清空按钮
        but3Ele.onclick = function () {
            func1()
            iEle.value = ''
        }
    </script>
</body>
</html>

下拉框联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id = 'd1'>
    <button id = 'd2'>开始</button>
    <button id = 'd3'>暂停</button>
    <button id = 'd4'>清空</button>

    <script>
        // 1.先找到按钮
        var iEle = document.getElementById('d1')
        var but1Ele = document.getElementById('d2')
        var but2Ele = document.getElementById('d3')
        var but3Ele = document.getElementById('d4')
        var t = null
        // 3.构造一个在文本框中显示时间的函数
        function showTime() {
            // 获取当前时间
            var cTime = new Date().toLocaleString()
            // 把时间显示在文本框中
            iEle.value = cTime
        }
        // 2.绑定开始按钮
        but1Ele.onclick = function () {
            // 防止重复执行定时任务
            if (!t){
            // 执行循环定时任务
            t = setInterval(showTime,999)
            }
        }
        // 4.绑定暂停按钮
        function func1() {
            // 中止定时任务
            clearInterval(t)
            t = null
        }

        but2Ele.onclick = func1
        // 5. 绑定清空按钮
        but3Ele.onclick = function () {
            func1()
            iEle.value = ''
        }
    </script>
</body>
</html>

补充:

1. 涉及到DOM操作的JS代码应该放在文档body标签内最后面。
2. **window.onload**  等待文档加载完毕之后在执行的内部代码   .onload()函数存在覆盖现象。

go&Python

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

BOM与DOM操作

文章目录

BOM与DOM操作

什么是BOM和DOM

BOM需要掌握操作

windows对象

windows的子对象

navigator对象(了解)

screen对象

history对象

location对象

三种弹出框

计时相关

BOM需要掌握操作

DOM操作之查找标签

节点操作

节点属性与值操作

class的操作

指定css操作

事件

案例:

定时器案例