DOM和BOM

Posted 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的主要内容,如果未能解决你的问题,请参考以下文章

DOM和BOM

DOM和BOM

JS之BOM与DOM

JavaScript操作Bom对象

BOM和DOM的区别

BOM和DOM