JS之BOM和POM

发布于：2024-02-25 ⋅ 阅读:(53) ⋅ 点赞:(0)

JS之BOM和POM

目录

什么是BOM 什么是DOM

BOM：browser，浏览器对象，提供了访问和操作浏览器窗口的方法和属性

DOM：document，文档对象，通过js来访问和修改html文件中的元素

BOM

window.open(url,name,specs,replace)
  • url：在窗口要加载的URL地址
  • name：(可选)新窗口名称
    • _blank：在一个新窗口或标签页中打开 URL。
    • _self：在当前窗口或标签页中加载 URL（默认行为）。
    • _parent：在父级框架中加载 URL（如果有）。
    • _top：在顶级框架中加载 URL。
  • specs：(可选)以逗号分隔的字符串，例如"width=500,height=400"
window.open("https://www.baidu.com/","_blank","width=500,height=400")

image-20240221220821339

window.close()

关闭当前浏览器窗口

window.alert(message)

在浏览器中显示一个警告框，包含指定的消息

window.alert("你好")

image-20240221221142541

window.confirm(message)

显示一个带有消息和确定/取消按钮的对话框，并返回用户的响应

window.confirm("是否确定")

image-20240221221329820

window.prompt(message, defaultText)

显示一个带有消息和文本输入框的对话框，并返回用户输入的值

window.prompt("请输入姓名", "张三")

image-20240221221427391

window.setTimeout(function, milliseconds, arguments)

在指定的时间间隔后执行一次函数

let func1 = function (){
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i])
    }
}
window.setTimeout(func1, 1000,[1,true,3,"你好"])
// 延迟一秒后打印[1, true, 3, '你好']
window.setInterval(function, milliseconds)

每隔指定的时间间隔重复执行函数

let func1 = function (){
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i])
    }
}
window.setInterval(func1, 1000,[1,true,3,"你好"])
// 每隔一秒打印一次[1, true, 3, '你好']
window.location.href

获取或设置当前页面的 URL

console.log(window.location.href)

DOM

获取元素

document.getElementById(id)

通过元素的 ID 属性获取单个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p id="p1">你好</p>
</div>
<script>
    var p = document.getElementById("p1")
    console.log(p)
</script>
</body>
</html>

image-20240221230022159

document.getElementsByClassName(className)

通过元素的类名获取一组元素

<div>
    <p class="p1">你好</p>
</div>
<script>
    let p1 = document.getElementsByClassName("p1")
    console.log(p1)
</script>

image-20240221230312222

document.getElementsByTagName(tagName)

通过元素的标签名获取一组元素

<body>
<div class="d1">
    <p>你好</p>
</div>
<script>
    let p1 = document.getElementsByTagName("div")
    console.log(p1)
</script>
</body>

image-20240221230515208

document.querySelector(selector)

通过 CSS 选择器获取匹配的第一个元素

<body>
<div class="d1">
    <p>你好</p>
</div>
<script>
    // 以下二种方法的结果是一样的
    let test = document.querySelector("div")
    console.log(test)
    let test2 = document.querySelector(".d1")
    console.log(test2)
</script>
</body>

image-20240221230630113

document.querySelectorAll(selector)

通过 CSS 选择器获取所有匹配的元素

<body>
<div class="d1">
    <p id="p1">你好</p>
    <p id="p2">世界</p>
    <p id="p3">我是</p>
    <p id="p4">dom</p>
</div>
<script>
    let test = document.querySelectorAll("p")
    console.log(test)
</script>
</body>

image-20240221230932331

操作元素

element.innerHTML

获取或设置元素的 HTML 内容

<body>
<div class="d1">
    <p id="p1">你好</p>
</div>
<script>
    // 获取
    let p1 = document.getElementById("p1")
    console.log(p1.innerHTML)
	// 输出：<p id="p1">你好</p>
	
	// 设置
	p1.innerHTML = "你不好"
    console.log(p1) 
	// 输出：<p id="p1">你不好</p>
</script>
</body>
element.textContent

获取或设置元素的纯文本内容

<body>
<div class="d1">
    <p id="p1">你好</p>
</div>
<script>
    // 获取
    let p1 = document.getElementById("p1")
    console.log(p1.textContent)
    // 输出：你好

    // 设置
    p1.textContent = "你不好"
    console.log(p1.textContent)
    // 输出：你不好
</script>
</body>
element.textContent

获取或设置元素的纯文本内容

<body>
<div id="d1">
    我是一个div标签
    <p id="p1">你好</p>
</div>
<script>
    let d1 = document.getElementById("d1")
    console.log(d1.textContent)
</script>
</body>

image-20240221231823732

element.getAttribute(attributeName)

获取元素的指定属性值

<body>
<div id="d1">
    我是一个div标签
    <p id="p1">你好</p>
</div>
<script>
    let d1 = document.getElementById("d1")
    console.log(d1.getAttribute("id"))
</script>
</body>

image-20240221232132682

element.setAttribute(attributeName, value)

设置元素的指定属性值

<body>
<div id="d1">
    我是一个div标签
    <p id="p1">你好</p>
</div>
<script>
    let d1 = document.getElementById("d1")
    d1.setAttribute("id","d2")
    console.log(d1.getAttribute("id"))
</script>
</body>

image-20240221232258751

element.classList

获取或操作元素的类名

<body>
<div class="ioi" id="d1">
    我是一个div标签
    <p id="p1">你好</p>
</div>
<script>
    let d1 = document.getElementById("d1")
    console.log(d1.classList)
</script>
</body>

image-20240221232417801

创建和添加元素

document.createElement(tagName)

创建一个新的元素节点

// 创建一个div标签
document.createElement("div")
element.appendChild(childElement)

将一个子元素节点添加到父元素的末尾

<body>
<div class="ioi" id="d1">
    我是一个div标签
</div>
<script>
    // 创建一个div标签
    let dom1 = document.createElement("div")
	// 获取id为d1的标签
    let d1 = document.getElementById("d1")
    // 将新建的div标签加入d1末尾
    d1.appendChild(dom1)
    console.log(d1)
</script>
</body>

image-20240221233026399

element.insertBefore(newElement, referenceElement)

在父元素中的指定位置之前插入新的元素节点

<div class="ioi" id="parent">
    我是一个div标签
    <p id="p1">我是一个p标签</p>
</div>
<script>
    // 获取一个父标签
    let parent = document.getElementById("parent")
    // 创建一个p标签 并加入文本
	let p1 = document.createElement("p")
    p1.textContent = "我是子元素"
	// 获取父标签中的一个标签属性p
    let p2 = parent.querySelector("p")

   	// 在父标签中添加p1标签，并位于p2之前
    parent.insertBefore(p1,p2)
    console.log(parent)
</script>
</body>

image-20240222010637750

删除元素

element.removeChild(childElement)

从父元素中移除一个子元素节点

<body>
<div id="d1">你好
    <p id="p1">世界</p>
</div>
<script>
    // 获取父标签d1
    let d1 = document.getElementById("d1")
	// 获取子标签p1
    let p1 = document.getElementById("p1")
    // 删除d1中的p1
    d1.removeChild(p1)
    console.log(d1)
</script>
</body>

image-20240222013731225

element.remove()

从其父元素中删除该元素节点，与removeChild类似只是不过换了对象

<body>
<div id="d1">你好
    <p id="p1">世界</p>
</div>
<script>
    let p1 = document.getElementById("p1")
    p1.remove()
    console.log(d1)
</script>
</body>

image-20240222013839189

事件处理

element.addEventListener(event, callback)

绑定特定事件发生时要执行的函数

  • element 是要添加事件监听器的 DOM 元素
  • event 是一个字符串，表示要监听的事件类型，例如 "click"点击、"mouseover"鼠标、"keydown"键盘 等
  • callback 是一个函数，表示在事件触发时要执行的回调函数
<div id="d1">
    <button id="b1">点我删除文字</button>
    <p id="p1">你好世界</p>
</div>
<script>
    // 获取按钮b1
    let b1 = document.getElementById("b1")

	// 获取p1标签并删除
    function func1() {
        let p1 = document.getElementById("p1")
        p1.remove()
    }
	
	// 当b1被点击时触发func1方法
    b1.addEventListener("click", func1)
element.removeEventListener(event, callback)

解除对特定事件的绑定

<div id="d1">
    <button id="b1">点我删除文字</button>
    <p id="p1">你好世界</p>
</div>
<script>
    // 获取按钮b1
    let b1 = document.getElementById("b1")

	// 获取p1标签并删除
    function func1() {
        let p1 = document.getElementById("p1")
        p1.remove()
    }
	
	// 当b1被点击时触发func1方法，但是紧接着又删除监听时间，因此什么都不会发生
    b1.addEventListener("click", func1)
    b1.removeEventListener("click", func1)
element.removeEventListener(event, callback)

解除对特定事件的绑定

<div id="d1">
    <button id="b1">点我删除文字</button>
    <p id="p1">你好世界</p>
</div>
<script>
    // 获取按钮b1
    let b1 = document.getElementById("b1")

	// 获取p1标签并删除
    function func1() {
        let p1 = document.getElementById("p1")
        p1.remove()
    }
	
	// 当b1被点击时触发func1方法，但是紧接着又删除监听时间，因此什么都不会发生
    b1.addEventListener("click", func1)
    b1.removeEventListener("click", func1)
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布