BOM 和 DOM


一.BOM

即浏览器对象模型,比如浏览器上的前进按钮,后退
,比如地址栏等



1.1代表性的对象

  1. window 对象
  2. location 对象
  3. screen 屏幕
  4. history 历史模型

1.2常用的方法

window:

1. alert()
2. confirm(); // 确定还是取消
3. prompt(); // 能输入内容
4. setInterval(); // windows 对象
5. setTimeout(); // 定时任务,延迟操作

location

1. href,         // 路由地址
2. replace();    // 打开新的网页,这个不会产生历史记录
3. location.host // 192.168.12.4:8080
5. pathcname,    // 端口后面的值,就是文件的地址
6. protocol,     //到底是http,还是https 协议
7. hash,   // 
8. url,    //
9. reload(), // 重新刷新网页。

navigator

navigator.plugins ,// 当前浏览器的插件

history

go()

setInterval

 let num = 0;
 let timer = null;
        timer = setInterval(function () {
            num++;
            if (num > 5) {
                clearInterval(timer); // 如果大于5,就把这个对象清除掉
            }
        },1000);



二.DOM

dom 对象就是用来动态的渲染页面,全称 document object Model 文档对象模型。dom 可以把文档当成一个 家谱树。树是由每个 node 节点组成。

2.1 节点分类

  • 元素节点(element node),比如<p> 标签
  • 文本节点 (text node),比如<p>你好</p> ,的你好
  • 属性节点 (attribue node),比如 <p title="很好" class="a">你好</p> 中的 classtitle


2.2 如何获取元素节点

 <p title="我是p标签的title" id="a">哈哈</p>
// 你写完的html元素,只要一运行,就会产生一个 document 元素。
        let c = document.getElementById("a"); // 通过id获取
        let b = document.getElementsByTagName("p"); // 把所有的p标签都打印出来。


        // 获取p元素
        let op = document.getElementById('a');
        let mytitle = op.getAttribute("title"); // 获得属性节点
        op.setAttribute("title", "哈哈,我是改变后的标签"); // 把节点的属性给修改了


2.3 dom 的属性

在文档对象模型(DOM)中,每个节点都是一个对象。DOM节点会有三个重要的属性。

  • nodeName:节点的名称
  • nodeValue: 节点的值
  • nodeType :节点的类型


2.4 dom 节点的其他属性

  //  元素节点
        let odiv = document.getElementById("box");
        console.log(odiv.childNodes); // 获取孩子节点
        console.log(odiv.childNodes[0]); // 获取第一个孩子节点
        console.log(odiv.firstChild); //第一个孩子即诶的那
        console.log(odiv.parentNode.parentNode);// 父节点的父节点
        console.log(odiv.nextSibling); // 下一个兄弟节点
        console.log(odiv.previousSibling); // 上一个兄弟节点

   let newnode = document.create("p")
        odiv.appendChild(newnode) // 添加一个新的标签


相关节点的插入

  <div id="box">
        <p>你好</p>
    </div>
    <script>
        // 插入节点
        var odiv = document.getElementById('box');
        let newnode = document.createElement("p"); // 创建p标签
        newnode.setAttribute('class', 'active'); // p标签的属性
        odiv.appendChild(newnode); // 从父节点中插入
        let textNode = document.createTextNode('我是插入的节点');
        newnode.appendChild(textNode);
    </script>


2.5 设置鼠标悬浮属性

  var odiv = document.getElementById('box');
        odiv.onmouseover = function () {
            this.style.background = "green"; // 鼠标悬浮上后的属性
        }

参考资料

https://www.bilibili.com/video/BV1PJ41157nb?p=17&share_source=copy_web

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值