BOM和DOM

【一】什么是BOM/DOM

BOM，浏览器对象模型，它使得JavaScript有能力与浏览器进行对话
DOM，文档对象模型，可以通过它访问HTML文档的所有元素
他们是JavaScript与浏览器以及网页内容进行交互的核心

【1】BOM

概述

浏览器对象模型（BOM）则是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。

示例

-- 打开新的浏览器窗口
window.open('https://www.baidu.com','','height=400px,width=400px') 

-- 获取当前页面的URL地址
window.location.href

-- 返回历史记录中的上一页
window.history.back()

-- 获取浏览器信息
navigator.userAgent

【2】DOM

概述

文档对象模型（DOM）是一个编程接口，它以树状结构来表示 HTML 或 XML 文档。
在 DOM 中，每个HTML元素、属性、文本节点等都被视为一个对象，通过JavaScript可以创建、查询、修改和删除这些对象。

示例

-- 通过元素ID获得DOM元素对象
document.getElementById('d1')

-- 根据CSS选择器或伪类选择DOM元素对象。
element.querySelector/pseudo-class

-- 向指定元素添加子元素。
element.appendChild(newElement)

-- 设置元素属性值。
element.setAttribute(name, value)

-- 获取或设置元素内的文本内容或HTML内容
element.innerText/innerHTML

【3】总结

DOM 和 BOM 是 JavaScript 开发中两个不可或缺的部分，分别负责对网页内容和浏览器环境进行深层次的操作，使得前端开发者能够实现丰富的交互功能和动态效果。

【二】Window对象

Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口。

【1】open()

打开新窗口或者获取对一个已经存在的窗口的引用。
第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小

window.open('https://www.baidu.com','','width=400px,height=400px')

【2】close()

关闭当前窗口

【3】setTimeout()

在指定的时间延迟后执行一次指定的函数或这一段代码

setTimeout(function index() {
    console.log('hello word')
},300)

【4】setInterval()

以固定的时间间隔重复执行指定的函数或者一段代码

setInterval(function(){
    console.log('hello word')
},3000)

【5】alert()

显示一个带有确定按钮和消息的警告框

window.alert('你不要过来啊')

【6】confirm()

显示一个带有指定消息和两个按钮（确认和取消）的对话框。
点击确认返回true
点击取消返回false

window.confirm('你好吗')

【7】prompt()

显示一个带有指定消息和一个文本输入框的对话框。
点击确认后会返回输入框里面的内容

window.prompt('你叫什么名字')

【8】innerHeight属性

返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

window.innerHeight
906

【9】innerWidth属性

返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

window.innerWidth
1707

【三】Window子对象

如果是window的子对象，window可以不写

【1】window.document

此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。

var divEle = document.getElementById('d1')

【2】window.location

此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。

window.location
Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/python28/%E5%89%8D%E7%AB%AF…258j31kgcq6oe8abplj7uvs&_ij_reload=RELOAD_ON_SAVE', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}

// 获取当前页面的完整 URL（包括协议、域名、路径等）。
window.location.href*

// 获取当前页面的协议部分（例如 'http:' 或 'https:'）。
window.location.protocol

// 获取当前页面的主机（域名和端口号）部分。
window.location.host

// 获取当前页面的主机名部分。
window.location.hostname

// 获取当前页面的端口号部分。
window.location.port

// 获取当前页面的路径部分。
window.location.pathname

// 获取当前页面的查询参数部分（即 URL 中问号后面的内容）。
window.location.search

// 获取当前页面的片段标识部分（即 URL 中井号后面的内容）。
window.location.hash

// 将当前页面重定向到指定的 URL。
window.location.assign("http://example.com");

// 重新加载当前页面。
window.location.reload()*

【3】window.history

此子对象用于操作浏览器的历史记录，包括向前和向后导航

// 返回当前会话的历史记录条目数。
window.history.length

// 加载上一个历史记录。相当于用户点击浏览器的后退按钮。
window.history.back()*

// 加载下一个历史记录。相当于用户点击浏览器的前进按钮。
window.history.forward()*

// 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。
window.history.go()

// 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

// 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【4】window.navigator

此子对象用于提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。

// 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。
window.navigator.userAgent*
    
// 返回操作系统平台，如 "Win32"、"MacIntel" 等。
window.navigator.platform*

// 返回浏览器的厂商或供应商名称。
window.navigator.vendor;

// 返回浏览器的首选语言，通常是用户操作系统的默认语言。
window.navigator.language;

// 返回一个布尔值，表示浏览器是否启用了 cookie。
window.navigator.cookieEnabled;

// 返回一个包含浏览器插件列表的 PluginArray 对象。
window.navigator.plugins;

【四】弹出框

弹出框是网页开发中常用的交互组件，用于显示警告、确认或提示信息，并与用户进行互动。
常见的弹出框类型包括警告框、确认框和提示框。

// 警告框
alert("这是一个警告框！");

// 确认框
confirm("你确定要删除吗？")

// 提示框
prompt("请输入您的姓名：", "默认值");

【五】计时器

计时器在网页开发中经常用于实现定时触发某些操作的功能。
根据需求，可以使用不同的方法来触发定时器。

【1】过一段时间触发(setTimeout)

如果需要在经过一定的时间后触发某个操作
就可以使用setTimeout函数来设置定时器
时间参数的单位为毫秒

setTimeout(function index() {
    console.log('hello word')
},3000)

【2】每隔一段时间触发一次(setInterval)

如果需要每隔一段时间就执行一段代码
就可以使用setInterval函数来设置定时器

setInterval(function index() {
    console.log('hello word')
},3000)

【3】清除定时器(clearTimeout/clearInterval)

用于清除计时器函数

var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

// 如果需要取消定时器
clearTimeout(timer);
-------------------------------------------
var timer = setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

// 如果需要取消定时器
clearInterval(timer);

【六】查找标签

直接查找标签和间接查找标签是在Web开发中常用的两种方式。
操作页面的时候需要用到document对象

【1】直接查找标签

// 根据元素的ID属性直接获取到对应的HTML元素。
var divEle = document.getElementById('d1')

// 根据标签名称获取匹配的所有元素。注意这里拿到的是一个数组
document.getElementsByTagName('div')

// 根据类名获取匹配的所有元素。注意这里拿到的是一个数组
document.getElementsByClassName('d3')

【2】间接查找标签

// 父节点标签元素
parentElement

//父节点标签元素
parentElement     

// 所有子标签
children      

// 第一个子标签元素
firstElementChild  

// 最后一个子标签元素
lastElementChild   

// 下一个兄弟标签元素
nextElementSibling  

// 上一个兄弟标签元素
previousElementSibling

【七】节点操作

节点操作是指文档对象模型DOM对节点进行创建，获取，修改，删除等操作

【1】创建节点

// 创建一个具有指定标签名的元素节点。
document.createElement('img')

// 创建一个包含指定文本内容的文本节点。
document.createTextNode('你好啊')

// 创建一个空的文档片段节点，可用于高效地插入多个节点。
createDocumentFragment()

【2】获取节点

// 根据元素的id属性获取对应的元素节点。
getElementById(id)

// 根据元素的标签名获取一组元素节点。
getElementsByTagName(tagName)

// 根据元素的类名获取一组元素节点。
getElementsByClassName(className)

// 使用CSS选择器获取匹配的第一个元素节点。
querySelector(selector)

// 使用CSS选择器获取匹配的所有元素节点。
querySelectorAll(selector)

【3】修改节点

// 将一个节点作为父节点的最后一个子节点添加到指定节点。
node.appendChild(childNode)

// 从父节点中移除指定子节点。
parent.removeChild(childNode)

// 使用新节点替换旧节点。
node.replaceChild(newNode, oldNode)

// 在参考节点之前插入新节点。
node.insertBefore(newNode, referenceNode)

【4】属性操作

// 获取指定属性的值。
element.getAttribute(attribute)

// 设置指定属性的值。
element.setAttribute(attribute, value)

// 移除指定属性。
element.removeAttribute(attribute)

【5】文本操作

// 获取或设置节点的文本内容。
node.textContent

// 获取或设置节点的HTML内容。
node.innerHTML:

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">div1
  <p>p1</p>
  <span id="s1">span1</span>
</div>
</body>
</html>

// 通过DOM操作动态的创建img标签
  let imgEle = document.createElement('img')
  let divEle = document.getElementById('d1')
  imgEle.src='111.png'
  divEle.appendChild(imgEle)
  imgEle.setAttribute('name','green')
  imgEle.setAttribute('title','妹子')

// 设置a标签在p标签上面
<script>
    let divEle = document.getElementById('d1')
    let aEle = document.createElement('a')
    let pEle = document.getElementById('p1')
    aEle.setAttribute('href', 'https://www.baidu.com')
    aEle.innerText='跳转百度'
    divEle.insertBefore(aEle,pEle)
</script>

【八】获取值操作

【1】获取属性值

可以使用getAttribute()方法来获取HTML元素的属性值。
该方法需要传入属性名作为参数，并返回属性对应的值。

let srcValue = aEle.getAttribute('href')

【2】获取文本内容

可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。
这些属性会返回元素内包含的文本，但存在一些差异：
innerText：返回元素的纯文本内容，不包括HTML标记。
innerHTML：返回元素的HTML内容，包括HTML标记。
textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

divEle.innerHTML
'div1\n    <p>p1</p>\n    <span id="s1">span1</span>\n<a href="https://www.baidu.com">跳转百度</a>'

divEle.innerText
'div1\n\np1\n\nspan1 跳转百度'

divEle.textContent
'div1\n    p1\n    span1\n跳转百度'

【3】获取用户输入值

对于表单元素（如input、select、textarea等）
可以通过获取其value属性来获取用户输入的值。

inputEle.value // '这是输入的内容'

【4】获取文件

当用户选择了一个或者多个文件之后
通过files属性可以获取这些文件的信息
files属性返回一个filelist对象

fileEle.files

【九】属性操作

【1】class属性操作

介绍

.classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

使用示例

let divEle = document.getElementById('d4')
divEle.classList // ['c1', 'bg_green', 'bg_red', value: 'c1 bg_green bg_red']

// 添加类名
classList.add("newClass");

// 移除类名
classList.remove("oldClass");

// 切换类名（如果存在则移除，否则添加）
classList.toggle("active");

注意事项

classList是只读的，不能直接赋值。
classList是一个动态的列表，会实时反映元素的当前类名状态。
可以通过遍历classList来访问每个类名，或者使用length属性获取类名数量。
classList方法在大多数现代浏览器中都得到了支持。
如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能。

【案例】标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d4 {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="d1">div1
    <p id="p1">p1</p>
    <div id="d4" class="c1 bg_green bg_red"></div>
</div>
<script>

</script>
</body>
</html>

类属性操作

// 获取div标签
let divEle = document.getElementById("d4");

// 查看当前标签下的所有类
divEle.classList

// 移除某个类
divEle.remove('bg_green)
              
// 添加某个类
divEle.remove('bg_green)
              
// 校验当前标签下是否包含某个属性 返回直接是true或false
divEle.classList.contains("d1")         

// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");

标签样式操作

通过.style设置样式

// 获取标签
let pEle = document.getElementById('p1')

// 设置颜色
pEle.style.color = 'red'

// 设置字体大小
pEle.style.fontSize = '48px'

// 设置背景颜色
pEle.style.backgroundColor = 'pink'

【十】事件

事件是指程序执行期间发生的特定操作或者状态变化
事件可以来自用户的交互操作（如鼠标点击，鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。

【1】鼠标事件

click：鼠标点击事件。
mouseover：鼠标悬停在元素上的事件。
mouseout：鼠标离开元素的事件。
mousedown：鼠标按下事件。
mouseup：鼠标松开事件。
mousemove：鼠标移动事件。

【2】键盘事件

keydown：键盘按下事件。
keyup：键盘松开事件。
keypress：键盘按键被按下并松开事件。

【3】表单事件：

submit：表单提交事件。
change：表单值改变事件。
focus：表单元素获取焦点事件。
blur：表单元素失去焦点事件。

【4】文档加载事件：

load：页面完全加载完成事件。
unload：页面关闭或离开事件。

【5】定时器事件

setTimeout：在指定的延迟时间后触发事件。
setInterval：每隔一定时间触发事件。

【6】自定义事件：

开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【十一】绑定事件的两种方式

【1】传统的事件属性绑定

通过在HTML标签内直接添加事件属性来实现事件的绑定

    <button onclick='index()'>点我</button>
<script>
 function index(){
     alert('你好')
 }
</script>

【2】现代的事件监听绑定

通过JavaScript代码动态的选择元素，并以代码方式绑定事件监听器
HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。

let btnEle = document.getElementById('d5')
btnEle.addEventListener('click',function (){
    alert('你好')
})

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d4 {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="d1">div1
    <p id="p1">p1</p>
    <span id="s1">span1</span>
    <input type="text" id="d2" value="你好啊">
    <input type="file" id="d3">
    <div id="d4" class="c1 bg_green bg_red"></div>
    <button id="d5">开关</button>
</div>
<script>

</script>
</body>
</html>

// 开关灯案例
let btnEle = document.getElementById('d5')
let divEle = document.getElementById('d4')
// 方法1
btnEle.onclick = function (){
    divEle.classList.toggle('bg_green')
}

// 方法2
btnEle.addEventListener('click',function (){
    divEle.classList.toggle('bg_green')
})

// input框获取焦点，失去焦点案例

let inputEle = document.getElementById('d2')
inputEle.onblur = function (){
    inputEle.value = '你好啊'
}
inputEle.onfocus = function (){
        inputEle.value = ''
}

// 动态展示时间案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="d1">div1

    <input type="text" id="d2" style="display: block;width: 300px;height: 40px" >
    <button id="d3">开始</button><button id="d4">结束</button>
</div>
<script>
    let t = null
    let inputEle = document.getElementById('d2')
    let startBtnEle = document.getElementById('d3')
    let endBtnEle = document.getElementById('d4')


    function showTime(){
        let timeObj = new Date()
        inputEle.value = timeObj.toLocaleString()
    }
    startBtnEle.onclick = function (){
        if (!t){
            t = setInterval(showTime,1000)
        }
    }
    endBtnEle.onclick = function (){
        clearInterval(t)
        t = null
    }
</script>
</body>
</html>

// 省市联动单例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="s1">
    <option value="请选择" disabled="disabled" selected="selected">--请选择--</option>
</select>
<select id="s2"></select>
<script>
    let data = {
        '浙江': ['杭州市', '台州市', '嘉兴市'],
        '上海': ['浦东区', '黄浦区', '静安区'],
        '北京': ['朝阳区', '昌平区', '海淀区']
    }

    // 先获取标签
    let proEle = document.getElementById('s1')
    let cityEle = document.getElementById('s2')

    // for循环获取省级数据
    for (i in data) {
        // 创建option标签
        let opEle = document.createElement('option')
        // 设置value
        opEle.value = i
        // 设置文本
        opEle.innerText = i
        // 添加标签
        proEle.appendChild(opEle)
    }

    // 文本域变化事件 change事件
    proEle.onchange = function () {
        // 每次都清除上一次的数据
        cityEle.innerHTML = ''
        // 美化选项
        let opEle = document.createElement('option')
        opEle.innerText = '--请选择--'
        opEle.setAttribute('selected','selected')
        opEle.setAttribute('disabled','disabled')
        cityEle.appendChild(opEle)
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取到对应市的数据
        let currentCityList = data[currentPro]
        console.log(currentCityList)
        // for 循环拿到所有的市，渲染到第二个select
        for (let i = 0; i < currentCityList.length; i++) {
            let opEle = document.createElement('option')
            opEle.value = currentCityList[i]
            opEle.innerText = currentCityList[i]
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>

posted @ 2024-03-24 17:08 HuangQiaoqi 阅读(51) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

Hqqqq

BOM和DOM

【一】什么是BOM/DOM

【1】BOM

概述

示例

【2】DOM

概述

示例

【3】总结

【二】Window对象

【1】open()

【2】close()

【3】setTimeout()

【4】setInterval()

【5】alert()

【6】confirm()

【7】prompt()

【8】innerHeight属性

【9】innerWidth属性

【三】Window子对象

【1】window.document

【2】window.location

【3】window.history

【4】window.navigator

【四】弹出框

【五】计时器

【1】过一段时间触发(setTimeout)

【2】每隔一段时间触发一次(setInterval)

【3】清除定时器(clearTimeout/clearInterval)

【六】查找标签

【1】直接查找标签

【2】间接查找标签

【七】节点操作

【1】创建节点

【2】获取节点

【3】修改节点

【4】属性操作

【5】文本操作

案例

【八】获取值操作

【1】获取属性值

【2】获取文本内容

【3】获取用户输入值

【4】获取文件

【九】属性操作

【1】class属性操作

介绍

使用示例

注意事项

【案例】标签样式

类属性操作

标签样式操作

【十】事件

【1】鼠标事件

【2】键盘事件

【3】表单事件：

【4】文档加载事件：

【5】定时器事件

【6】自定义事件：

【十一】绑定事件的两种方式

【1】传统的事件属性绑定

【2】现代的事件监听绑定

案例

公告