JavaScript BOM和DOM

最新推荐文章于 2024-05-22 13:52:22 发布

JiaXinXiaoBingGan

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量56

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/JiaXinBinGan/article/details/132094366

版权

一、BOM

1.BOM概念

BOM，即浏览器对象模型，BOM提供了独立于内容的对象结构，可以与浏览器窗口进行互动

2.window对象

窗口对象包括了3个对象：

history：历史记录

document：文档

location：定位

3.history对象

history主要用于控制页面的历史纪录的显示

back():页面展示前一个历史记录

<a href="javascript: history.back()">返回</a>

forward():页面展示后一个历史记录

<a href="javascript: history.forward()">前进</a>

go():根据给定数量现实历史记录，如果是正数，则使用前面的历史记录，如果是负数，则使用后面的历史记录

<a href="javascript: history.go(-1)">返回</a>
<a href="page3.html">下一页</a>
<a href="javascript: history.go(1)">前进</a>

4.location对象

location对象主要用于获取以及更改浏览器地址栏信息。

属性

host:设置或返回主机名和当前URL的端口号
hostname:设置或返回当前URL的主机名
href:设置或返回完整的URL

函数

reload()：重新加载当前文档
replace()：用新的文档替换当前文档

<!--javascript:void(0)表示点击超链接时不做任何事情-->
<a href="javascript:void(0)" onclick="showAddress()">显示地址栏信息</a>
<a href="javascript:void(0)" onclick="refresh()">刷新页面</a>
<a href="javascript:void(0)" onclick="changePage()">替换新页面</a>

function showAddress() {
    console.log(location.host);
    console.log(location.hostname);
    console.log(location.href);
}

function refresh() {
    location.reload();
}

function changePage() {
    location.replace("page2.html");
}

5.document对象

document对象主要用于操作页面元素

getElementById():获取给定ID值的元素
getElementByName():获取给定名称的元素的集合
getElementByClassName():获取给定类名的元素的集合
getElementByTagName():获取给定标签名的元素的集合

<body>
    <div id="a">a</div>
    <div id="b" class="c">b</div>
    <div class="c">c</div>
    <div name="d">d</div>
</body>
<script type="text/javascript">
    let div = document.getElementById("a"); //得到单个元素
    console.log(div)
    // div.innerText = "将内容改变为b"; //内部文本内容
    // div.innerHTML = "<h1>内容支持标签</h1>"; //内部HTML内容
    div.textContent = "<h1>文本内容</h1>"; //作用与innerText一样
    console.log("============================")
    //通过标签名获取元素
    let divArr = document.getElementsByTagName("div");
    console.log(divArr)
    console.log("============================")
    //通过类名获取元素
    let arr = document.getElementsByClassName("c");
    console.log(arr)
    console.log("============================")
    let nameArr = document.getElementsByName("d");
    console.log(nameArr)
</script>

innerText

设置元素的内部文本

textContent

设置元素的文本内容

innerHTML

设置的内部文本可以是标签，并且可以被解析。

二、周期函数和延迟函数

1.周期函数

setInterval(函数,间隔时间)：按照给定的间隔时间重置执行给定的函数

clearlnterval(周期函数)：清除给定的周期函数

2.延迟函数

setTimeout(函数,延迟时间)：在给定的延迟事件后执行一次给定的函数

clearTimeout(延迟函数)：清除给定的延迟函数

let count = 0;

function showTime() {
    let now = new Date(); //创建一个日期对象，默认时间为系统当前时间
    let year = now.getFullYear(); //获取年份
    let month = now.getMonth() + 1; //获取月份，月份在0~11之间
    let date = now.getDate(); //获取日期是当前月的第几天
    let hour = now.getHours();//获取小时数
    let minute = now.getMinutes(); //获取分钟数
    let second = now.getSeconds(); //获取秒数
    let time = year + "-" + zerofill(month, 2) + "-" + zerofill(date, 2) + " " + zerofill(hour, 2) + ":" + zerofill(minute,2) + ":" + zerofill(second, 2);
    let div = document.getElementById("time");
    div.textContent = time;
    count++;
    //count为10的时候，周期函数需要停止
    // if(count == 10){
    //     clearInterval(t); //清理给定的周期函数
    // }
}

// setInterval(showTime, 1000);
// let t = setInterval('showTime()', 1000); //如果第一个参数传递的是一个字符串，该字符串必须是函数的调用

let s = setTimeout(showTime, 3000); //在3秒后执行一次showTime函数
clearTimeout(s);

function zerofill(num, targetLen) {
    let str = num + "";
    while (str.length < targetLen){
        str = "0" + str;
    }
    return str;
}

三、DOM

1.DOM 概念

DOM(Document Object Model)，即文档对象模型，DOM主要提供了对于页面内容的一些操作。在DOM中，所有的内容（标签，文本，注释）都是DOM节点，所有的标签都是DOM元素。

2.节点属性

parentNode：获取父节点
childNodes：获取所有下一级子节点
firstChild：获取第一个子节点
lastChild：获取最后一个子节点
nextSibling：获取下一个同级节点
previousSilbing：获取上一个同级节点

let box = document.getElementById("box");
console.log(box.parentNode) //父节点
let childNodes = box.childNodes; //文本内容包括enter键在内的换行、注释都属于节点
console.log(childNodes)
console.log(box.firstChild) //第一个子节点
console.log(box.lastChild) //最后一个子节点

let first = childNodes[0]; //第一个子节点
console.log(first.nextSibling);
let last = box.lastChild; //最后一个子节点
console.log(last.previousSibling)

3.元素属性

parentElement：获取父元素
children：获取所有下一级子元素
firstElementChild：获取第一个子元素
lastElementChild：获取最后一个子元素
nextElementChild：获取下一个同级元素
previousElementChild：获取上一个同级元素

let box = document.getElementById("box");
// console.log(box.parentNode) //父节点
// let childNodes = box.childNodes; //文本内容包括enter键在内的换行、注释都属于节点
// console.log(childNodes)
// console.log(box.firstChild) //第一个子节点
// console.log(box.lastChild) //最后一个子节点
//
// let first = childNodes[0]; //第一个子节点
// console.log(first.nextSibling);
// let last = box.lastChild; //最后一个子节点
// console.log(last.previousSibling)
console.log(box.parentElement); //父元素，元素也就是标签
let children = box.children; //下一级子元素
console.log(children)

console.log(box.firstElementChild); //第一个子元素
console.log(box.lastElementChild); //最后一个子元素
console.log(box.firstElementChild.nextElementSibling);//第一个子元素的下一个同级元素
console.log(box.firstElementChild.previousElementSibling);//第一个子元素的上一个同级元素

4.节点操作

createElement()：根据给定的标签名创建元素节点
A.appendChild(B)：将节点B追加到节点A的末尾
A.remove()：将节点A从DOM树中移出
getAttribute(“属性名”)：获取给定属性名对应的属性值
setAttibute(“属性名”,“属性值”)：为给定的属性名设置给定的属性值

<input type="button" value="查询" id="searchBtn">
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody id="dataBox">
        </tbody>
    </table>
</body>
<script type="text/javascript">
    let stus = [{
        name: '张三1',
        sex: '男',
        age: 20
    },{
        name: '张三2',
        sex: '男',
        age: 20
    },{
        name: '张三3',
        sex: '男',
        age: 20
    },{
        name: '张三4',
        sex: '男',
        age: 20
    }];

    let btn = document.getElementById("searchBtn");
    btn.onclick = function () {
        let dataBox = document.getElementById("dataBox");
        let table = dataBox.parentElement; //获取table标签元素
        dataBox.remove(); //将tbody从DOM树中移除
        dataBox = document.createElement("tbody"); //创建tr标签
        dataBox.setAttribute("id", "dataBox");
        table.appendChild(dataBox);
        for(let i=0; i<stus.length; i++){
            let tr = document.createElement("tr"); //创建tr标签
            let td = document.createElement("td"); //创建td标签
            td.textContent = stus[i].name;
            tr.appendChild(td); //将td追加到tr的末尾

            td = document.createElement("td"); //创建td标签
            td.textContent = stus[i].sex;
            tr.append(td);

            td = document.createElement("td"); //创建td标签
            td.textContent = stus[i].age;
            tr.append(td);
            dataBox.appendChild(tr);
        }
    }
</script>

5.节点样式

style样式

节点.style.样式属性 ＝ "值";

class样式

节点.className = "样式名称";

<head>
    <meta charset="UTF-8">
    <title>节点样式</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #ddd;
        }
        .active{
             background-color: red;
        }
    </style>
</head>
<body>
    <div id="a"  class="box active"></div>
</body>
<script type="text/javascript">
    let div = document.getElementById("a");
    // div.style.height = '50px';
    // div.style.backgroundColor = "red";
    // div.className = "box";
    div.className = "box";
</script>

JiaXinXiaoBingGan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM和DOM

DOM(Document Object Model)，即文档对象模型，DOM主要提供了对于页面内容的一些操作。在DOM中，所有的内容（标签，文本，注释）都是DOM节点，所有的标签都是DOM元素。go():根据给定数量现实历史记录，如果是正数，则使用前面的历史记录，如果是负数，则使用后面的历史记录。// div.innerHTML = "内容支持标签";//内部HTML内容。BOM，即浏览器对象模型，BOM提供了独立于内容的对象结构，可以与浏览器窗口进行互动。//将td追加到tr的末尾。
复制链接

扫一扫