Js Bom and Dom 概念简介-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45114208/article/details/109583973

本文介绍了浏览器对象模型(BOM)的基础知识，包括弹出框、定时器及页面跳转等操作，并深入探讨了文档对象模型(DOM)的概念，如节点访问、节点类型及节点操作等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.BOM

Brower Object Model (浏览器对象模型) 在这里插入图片描述
三个弹出框
alert(“内容”) 弹出框：阻塞代码运行
confirm(“提示内容”) 确认框确定返回true 取消返回false
prompt(“提示内容”,“默认值”) 输入框返回数值为字符串
两个定时器
setInterval(function(){},time) ----（执行任务，间隔时间) :连续执行定时器 -----{clearInterval() 在特定条件下，停止定时器的运行}
setInterval(function(){},time) ----（执行任务，间隔时间) :只执行一次，有延时性的特点。
延迟关闭demo

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始" id="begin">&nbsp;&nbsp;
        <input type="button" value="停止" id="end"></br>
        <div id="box"></div>
    </body>
</html>
<script>
    var d = document.getElementById("box");
    var b = document.getElementById("begin");
    var e = document.getElementById("end");    
    var t = null;//注意全局变量定时器的作用域
    b.onclick = function(){
        t = setTimeout(function(){
            d.style.display = "none";
        },3000);
    }
    e.onclick = function(){
        clearTimeout(t);
    }
</script>

二.location地址对象

页面跳转
location.href 可读写
//当前页面地址读
document.write(location.href);
//页面在三秒后跳到外网
setTimeout(function(){
location.href = “http://www.baidu.com”;
},3000);
location.replace(“url”)
//location.replace(“index.html”);
location.replace(“http://www.baidu.com”); 覆盖原先网页没有浏览痕迹
页面刷新：
location.reload();

刷新
function fun(){
location.reload();
}

三.document 文档对象作用找对象

每个载入浏览器的HTML文档都会成为 Document 对象

//document
    //a.  document.write()
    //1.自带字符串解析
    //document.write("sdfsdf" + "<br/>" + "heihei");
    //document.write("<font color='yellow'>"+666+"</font>");
    
    //2.如果该方法与事件连用，会直接覆盖原网页
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        document.write("heihei");
    }

通过document找对象
1.getElementById() 返回拥有指定id的第一个对象；
2.getElementsByName() 返回带有指定名称的对象集合；
3.getElementsByTagName() 返回带有指定标签名的对象集合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="txt" value="123"/></br>
        <input type="text" name="txt" value="456"/></br>
        <input type="text" name="txt" value="777"/></br>
        <input type="text" name="txt" value="888"/></br>
    </body>
</html>
<script>
    var a = document.getElementsByName("txt");
    var str = " ";
    for(var i=0; i<a.length; i++){
        str += a[i].value;
    }
    document.write(str);
</script>

四.DOM

DOM( Document Object Model),文档对象模型
在这里插入图片描述
根据层次关系访问节点：（包括文本和元素）
1.parentNode 返回节点的父节点
2.childNodes 返回子节点集合，childNodes[i]
3.firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
4.lastChild 返回节点的最后一个子节点
5.nextSibling 下一个节点
6.previoousSibling 上一个节点

<body id="bd">
        <p>你好!</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>
<script>
    var a = document.getElementById("bd");
    var str = a.firstChild.nextSibling.innerHTML;
    document.write(str);
</script>

通过层级关系访问元素节点
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSiblimg 下一个节点
previousElementSibling 上一个节点
var str = a.firstElementsChild.innerHTML;
节点类型：
通过nodeType属性来判断节点类型
1代表元素节点
3代表文本节点

<p id = "_p">123</p>
var p = document.getElementById("_p");
    //元素类型     1
    document.write(p.nodeType);
    //文本类型
    document.write(p.firstChild.nodeType);//3

节点的操作

document.createElement(HTML标签名)   //创建一个元素节点
node.appendChild(newChild)   //newChild 被添加到孩子列表中的末端。
node.insertBefore(newChild, referenceNode) // 将 newChild 节点插入到 referenceNode 之前。
node.remove() //删除node子节点。
node.replaceChild(newChild, oldChild)  //用newChild节点替换oldChild节点
创建节点:

创建节点

var oH2 = document.createElement("h2");
    oH2.innerHTML = "静夜思";
    //连接
    document.body.appendChild(oH2);
        
    var oP1 = document.createElement("p");
    oP1.innerHTML = "床前明月光,";

删除节点

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
    <input type="button" value="删除"/>
    
</html>
<script>
    var oUl = document.querySelector("ul");
    var oBtn = document.querySelector("button");
    oBtn.onclick = function(){
        //删除的元素节点.remove(无参)
        //hasChildNodes判断当前的父元素是否还有子节点
        if(oUl.hasChildNodes()){
            oUl.lastElementChild.remove();
        }
    }
</script>