BOM 和 DOM

文章目录

• • 一.BOM
  • • 1.1代表性的对象
    • 1.2常用的方法
    • setInterval
  • 二.DOM
  • • 2.1 节点分类
    • 2.2 如何获取元素节点
    • 2.3 dom 的属性
    • 2.4 dom 节点的其他属性
    • 2.5 设置鼠标悬浮属性
  • 参考资料

---

一.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> 中的 class 和 title

---

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