DOM和BOM

Posted 2021-12-18 ay742936292

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM和BOM相关的知识，希望对你有一定的参考价值。

一，BOM与DOM简介：

　　BOM（Brow Object Model）：就是指浏览器对象模型，可以让javascript有能力与浏览器进行交互。

　　DOM（Document Object Model）：是指文档对象模型，通过可以访问html文档的所有元素。

二，BOM操作：

　　所有浏览器都支持windows对象，表示的浏览器的窗口。

　　常用方法：

　　　　查看浏览器窗口的内部高度：window.innerHeight

　　　　查看浏览器窗口的内部宽度：windows.innerwidth
　　　　打开新的窗口：windows,open()

　　　　关闭当前窗口：windows.close()

　　windows.appName

　　　　web浏览器全称：navigator.appName

　　　　web浏览器厂商和版本的详细字符串：navigator.appVersion

　　　　客户端绝大部分信息：navigator.userAgent

　　　　浏览器运行所在的操作系统：navigator.plaform

　　windows.history

　　　　前进一页：history.forward()

　　　　后退一页：history.back()

　　windows.location(重点)

　　　　获取URL：location.href

　　　　跳转到指定页面：location.href = ‘URL‘

　　　　重新加载页面：location.reload()

　　弹出框

　　　　警告框（alert）

　　　　确认框（confrim）

　　　　提示框（prompt）

　　计时器相关（重点）

　　　　setTimeout 与 clearTimeout(设置单次定时触发，清除)

　　　　setinterval 与 clearinterval(循坏触发，清除)

　　案例：

function f1()  
    alert(123);


function clear() 
    var t = setInterval(f1,3000); //以3秒为周期不停的调用f1函数。
    function inner() 
        clearInterval(t); //clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作
    
    setTimeout(inner,9000) // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

clear();

三：DOM操作

　　通过JS代码操作html页面，实现相应效果。

　　要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情。

四：查找标签

　　直接查找：

　　　　查找id：document.getElementById

　　　　查找类：document.getElementsByClassName

　　　　查找标签：document.getElementsByTagName

　　间接查找：

　　　　父节点标签元素：parentElement

　　　　所有子标签：children

　　　　第一个子标签：firstElementChild

　　　　最后一个子标签元素：lastElementchild

　　　　下一个兄弟标签元素：nextElementchild

　　　　上一个兄弟标签元素：previousElementssibling

　　ps：js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式：

　　　　windows.onload = function(里面写JS代码)title标签内部

　　　　js写在html文档最下方

五，节点操作　

　　案例一：

　　ps：在该标签设置自定义属性的时候不能用点的方式，setAttribute方法既可以设置自定义属性，也可以设置自带的属性。

// 创建标签。
var imgEle = document.createElement(‘img‘);
// 设置自定义属性。
imgEle.setAttribute(‘id‘,‘i1‘)
// 设置固有的属性。
imgEle.src = ‘longzhu.png‘
// 添加到DOM树中，让浏览器展示出来。
var d1Ele = document.getElementById(‘d1‘)
d1Ele.appendChild(imgEle)

　　案例二：

// 创建一个a标签
var aEle = document.createElement("a")
// 添加固有属性
aEle.href = ‘https:www.baidu.com‘
// 添加文本属性
aEle.innerText = ‘clicked me‘
// 获取参考点标签
var d3Ele = document.getElementById(‘d3‘)
var s1Ele = document.getElementById(‘s1‘)
// 在d3标签内部，s1标签上方添加创建的a标签
d3Ele.insertBefore(aEle,s1Ele)

　　ps：innerText 和 innerHTML的区别在于：innerText 不能识别html标签，而innerHTML可以。

　　获取值操作：对象.value

　　设置值操作：对象.value = 需要设置的值

　　class操作：

　　　　ps：通过class获取到的数据是一个数组，需要通过索引拿到单个对象。

// 根据class找到相应的标签对象
var c1Ele = document.getElementsByClassName(‘c1‘)[0]

// 获取该标签对象的class属性列表并移除背景红色
c1Ele.classList.remove(‘bg-red‘)

// 添加属性
c1Ele.classList.add(‘bg-green‘)

// 判断是否存在
c1Ele.classList.contains(‘bg-green‘)
c1Ele.classList.contains(‘bg-red‘)

// 有则删除，无则添加
c1Ele.classList.toggle(‘bg-green‘)

　　style样式操作：

// 修改高度样式
d1Ele.style.height = ‘200px‘
// 修改宽度样式
d1Ele.style.width = ‘200px‘
// 修改背景色样式
d1Ele.style.backgroundColor = ‘blue‘

六：时间绑定

　　两种绑定时间的方法：

　　　　标签内直接调用相应事件函数。

　　　　js代码自动查找标签并绑定事件。

　　案例一：

<div class="bg-red " id="d1"></div>
 //为button添加一个点击事件。
<button id=‘b1‘ onclick=‘change();‘>开关1</button>
<button id=‘b2‘>开关2</button>
<script>
    // 标签直接绑定事件
    function change()
        var d1Ele = document.getElementById(‘d1‘);
        // 为元素切换类
        d1Ele.classLict.toggle(‘bg-green‘);
    
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById(‘b2‘);
    b2Ele.onclick = ()=>
        change();

　　案例二：

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById(‘i1‘);
        // 赋值一个焦点函数（鼠标点中触发），（ev）事件参数
    i1Ele.onfocus = function (ev) 
        i1Ele.value = ‘‘;
        // 也可以直接用this
        this.value = ‘‘
    ;
 // 时间在失去焦点时触发。
    i1Ele.onblur = function (ev) 
        i1Ele.value = ‘苹果电脑‘;
        // 也可以直接用this
        this.value = ‘苹果电脑‘

　　案例三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var b1Ele = document.getElementById(‘b1‘);
    var iEle = document.getElementById(‘d1‘);
    var b2Ele = document.getElementById(‘b2‘);
    // 定义一个展示时间的函数
    var showTime = function()
        // 获取当前时间
        var cTime = new Date();
        iEle.value = cTime.toLocaleString()
    ;
    // 给b1标签绑定点击事件
    b1Ele.onclick = function () 
        // 先判断flag是否已经指代了一个定时器
        if (!flag)
            flag = setInterval(showTime,1000)
        
    ;

    b2Ele.onclick = function () 
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;
    
</script>
</body>
</html>

　　案例四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">
</select>

<select name="" id="d2">
</select>

<script>
    // 先获取需要操作的标签对象
    let proEle = document.getElementById(‘d1‘);
    let cityEle = document.getElementById(‘d2‘);
    let data = "河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"];
    // 将所有的省渲染到proEle标签内部  for循环获取所有的省
    for (let pro in data)
        // 创建option标签
        let opEle = document.createElement(‘option‘);
        // 给option标签设置文本值
        opEle.innerText = pro;
        // 将生成的option标签添加到proEle中
        proEle.appendChild(opEle)
    
    //onchange 当用户改变输入框内容时运行的代码
    proEle.onchange = function () 
        // 先清空cityEle标签内所有的内容
        cityEle.innerHTML = ‘‘;
        // 获取用户选择的省 根据省拿到对应的市
        let choice_pro = proEle.value;
        let cityList = data[choice_pro];
        // for循环创建option标签添加到cityEle标签内
        for (let i=0;i<cityList.length;i++)
            // 创建option标签并添加文本
            let cEle = document.createElement(‘option‘);
            // 给option标签设置文本值
            cEle.innerText = cityList[i];
            // 将生成的option标签添加到proEle中
            cityEle.appendChild(cEle)
        
    
</script>
</body>
</html>

以上是关于DOM和BOM的主要内容，如果未能解决你的问题，请参考以下文章