JS之BOM和POM

JS之BOM和POM
- 什么是BOM 什么是DOM
- BOM
- - - `window.open(url,name,specs,replace)`
    - `window.close()`
    - `window.alert(message)`
    - `window.confirm(message)`
    - `window.prompt(message, defaultText)`
    - `window.setTimeout(function, milliseconds, arguments)`
    - `window.setInterval(function, milliseconds)`
    - `window.location.href`
- DOM
- - 获取元素
  - - `document.getElementById(id)`
    - `document.getElementsByClassName(className)`
    - `document.getElementsByTagName(tagName)`
    - `document.querySelector(selector)`
    - `document.querySelectorAll(selector)`
  - 操作元素
  - - `element.innerHTML`
    - `element.textContent`
    - `element.textContent`
    - `element.getAttribute(attributeName)`
    - `element.setAttribute(attributeName, value)`
    - `element.classList`
  - 创建和添加元素
  - - `document.createElement(tagName)`
    - `element.appendChild(childElement)`
    - `element.insertBefore(newElement, referenceElement)`
  - 删除元素
  - - `element.removeChild(childElement)`
    - `element.remove()`
  - 事件处理
  - - `element.addEventListener(event, callback)`
    - `element.removeEventListener(event, callback)`
    - `element.removeEventListener(event, callback)`

什么是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")

`window.close()`

关闭当前浏览器窗口

`window.alert(message)`

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

window.alert("你好")

`window.confirm(message)`

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

window.confirm("是否确定")

`window.prompt(message, defaultText)`

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

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

`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>

`document.getElementsByClassName(className)`

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

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

`document.getElementsByTagName(tagName)`

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

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

`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>

`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>

操作元素

`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>

`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>

`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>

`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>

创建和添加元素

`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>

`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>

删除元素

`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>

`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>

事件处理

`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)