一.BOM&DOM

@菜鸟前端在进步

已于 2022-03-20 21:02:57 修改

阅读量107

点赞数

分类专栏： Javascript-DOM 文章标签： linq javascript c#

于 2022-03-20 15:35:26 首次发布

本文链接：https://blog.csdn.net/m0_67183922/article/details/123501216

版权

Javascript-DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

。DOM相当于之前写的网页

BOM相当于当前打开的浏览器窗口

一.BOM 是浏览器对象模型其实就是之前使用过的window对象

该对象身上有很多成员（属性和方法），这些属性和方法用于操作浏览器本身

由于window对象是浏览器的默认对象，所以在使用它身上的成员时，可以省略window

1.1各种弹框

window.alert('消息框')
window.prompt('请输入')
window.confirm('确定删除吗？')

2.打开和关闭窗口 open方法用于打开新窗口

<button id='btn'>打开页面</button>

 let btn = document.getElementById('btn')
 btn.onclick = function(){
 // open方法，用于打开新窗口
            window.open('./index02.html')
        }

第一步：document.getElementById('btn')通过它获取按钮，第二步给它一个点击事件 btn.onclick = function(){}

3.关闭当前窗口， close方法关闭窗口

let btn = document.getElementById('btn')
 btn.onclick = function(){
 // open方法，用于打开新窗口
            window.close()
        }

4.通用方法

//parseInt()用于将字符串转为整数
//parseFloat()用于将字符串转为浮点数
// isNaN()方法，用于检查一个字符串是不是非数字，只要不是数字格式就返回true

let num1 = window.parseInt('123') 
let num2 = window.parseFloat('123.123')
console.log(window.isNaN('123'));
console.log(window.isNaN('123.123'));
console.log(window.isNaN('123.123.123'));

5.计时器

setTimeout（参数1，参数2）指定毫秒后，执行的定时器，其中参数1是函数，它只执行一次

setInterval （参数1，参数2）每隔指定的毫秒后，执行一次，它是重复的

 window.setTimeout(()=>{
            console.log('好好学习');
        },3000)
 window.setInterval(()=>{
            console.log('天天向上');
        },3000)

6.常用属性 location

location属性，用于设置网页地址栏信息。 location对象的href属性，用于跳转浏览器的地址

 <button id="bd">到百度</button>

 let bd = document.getElementById('bd')
 bd.onclick = function(){
            // location对象的href属性，用于跳转浏览器的地址
            window.location.href = 'https://baidu.com'
        }
 let sx = document.getElementById('sx')
 sx.onclick = function(){
            // location.reload()方法 表示刷新当前地址栏（刷新当前窗口）
            window.location.reload()
        }

// location.reload()方法表示刷新当前地址栏（刷新当前窗口）

history属性：

history是window对象的属性，该属性用于设置网页的浏览历史记录

forward()前进

window.history.forward()

back()后退

window.history.back()

go()方法，既可以实现前进，也可以实现后退

window.history.go(1) //前进一次

window.history.go(3) //前进三次

window.history.go(-1) //后退一次

window.history.go(-3) //后退三次

<h1>苹果</h1>
    <a href="./two.html">西瓜</a>
    <hr>
    <button id="ht">后退</button>
    <button id="qj">前进</button>
    <script>
        let ht = document.getElementById('ht')
        ht.onclick = function(){
            // history对象的back方法，用于从浏览器的历史记录后退
            // window.history.back()   后退方法一
            // go方法的优势，比较灵活，-1表示后退1次，-3表示后退3次
            // 后退方法二
            window.history.go(-1)   //后退一次
        }
        let jq = document.getElementById('qj')
        qj.onclick = function(){
            // history对象的forward方法，用于从浏览器的历史记录前进
            // window.history.forward()
            window.history.go (1)  //前进1次
        }
    </script>

后退 window.history.back() ，或者： window.history.go(-1) 后退

前进：window.history.forward() 。或者 window.history.go(1)

二、DOM

// DOM 文档对象模型,其实就是当前网页中的所有内容

// DOM 就是 document对象，我们是通过document对象类操作当前网页中的内容的

// 使用DOM获取网页元素：

// 如果获取的元素，是网页中的唯一元素，可以通document直接获取

2.1 document.title = '好好学习'

 let msg = document.getElementById('msg')
        msg.innerHTML = '大家好！我是小敏'

2.2getElementById方法，根据元素的id属性值来获取元素

// 注意：如果当前网页中拥有多个id属性值相同元素，只能获取第一个元素

// innerHTML属性，用于在网页元素中添加内容

2.3 、getElementsByTagName方法，根据元素的标签名获取所有该元素

<ul>
        <li>南京</li>
        <li>常州</li>
        <li>苏州</li>
        <li>无锡</li>
    </ul>
<script>
let lis = document.getElementsByTagName('li')
        for(let i=0;i<lis.length;i++){
            lis[i].innerHTML = '哈哈！'
        }
</script>

2.4、 getElementsByName方法，根据元素的name属性值获取是所有该元素

<div name="one">我是div</div>
<p name="one">我是p</p>
<h2 name="one">我是h2</h2>
<script>
 let ones = document.getElementsByName('one')
        ones.forEach(r=>{  //r是每个元素
            r.style.background = 'lightblue'
        })
</script>

2.5、getElementsByClassName方法，根据元素的class属性值获取所有的该元素

<div class="two">我是div</div>
<p class="two">我是p</p> 
<h2 class="two">我是h2</h2>
<script>
let twos = document.getElementsByClassName('two')
for(let i =0;i<two.length;i++){
    twos[i].style.border = '2px solid blue'
}

三、获取DOM元素

1、querySelector方法，根据任意格式的选择器获取第一个元素

<h1>DOM</h1>
<div id="msg"></div>
<div id="msg"></div>
<script>
let msgs = document.querySelector('#msg')  //根据id选择器获取元素
msg.innerHTML = '你好，欢迎来到我晚点世界'
}
</script>

 <ol>
        <li>南京</li>
        <li>常州</li>
        <li>苏州</li>
        <li>无锡</li>
    </ol>
<script>
let lis = document.querySelector('li') //根据标签选择器获取元素
lis.style.background = 'lightblue'
</script>

根据后代选择器获取元素

2、querySelectorAll方法，根据任何格式的选择器获取所有元素

querySelectorAll()方法，返回的是集合对象，不是数组对象。可以利用展开运算符，将集合对象转为数组对象。

<ul>
        <li>南京</li>
        <li>常州</li>
        <li>苏州</li>
        <li>无锡</li>
    </ul>
<script> 
let li = document.querySelector('ul li')  //根据后代选择器获取元素
li.style.background = 'lightblue'
// querySelectorAll方法，根据任意格式的选择器获取所有元素
        let lis = document.querySelectorAll('ul li')
        lis.forEach(r => {  //r是每一位元素
            r.innerHTML = '哈哈！' //把ul中的li中的每一位元素的在html中的内容都改成哈哈
        })
</script>

四、操作元素内容

<div id="one"></div>
<div id="two"></div>

想要给div添加内容就必须获取div

<script>
// innerText属性,用于获取 和操作 DOM的文本内容
//这里把'<h2>好好学习</h2>'中的<h2>当成文本来展示
document.querySelector('#one').innerText = '<h2>好好学习</h2>' 
// innerHTML属性，用于获取 和 操作 DOM的HTML内容
//这里把'<h2>好好学习</h2>'中的<h2>当成html标签来展示
document.querySelector("#two").innerHTML = '<h2>好好学习</h2>'
</script>

4.1、 innerText属性,用于获取和操作 DOM的文本内容

4.2 innerHTML属性，用于获取和操作 DOM的HTML内容

五、操作DOM的样式

操作DOM的样式，有多种方式：

通过style属性直接设置
通过className属性设置类选择器
也可以通过classList属性添加多个类选择器

<style>
.box{
    color:pink;
    border:1px solid #ccc;
}
</style>
<div id="one"></div>
<div id="two"></div>

5.2、通过style属性，给元素添加行内样式

one.style.color = 'red'
one.style.border = '1px solid #ccc'

5.3、通过className属性设置类选择器

two.className = 'box'

5.4、也可以通过classList属性添加多个类选择器

<style>
.red {
            color: red;
        }
.border{
            border: 1px solid #ccc;
        }
</style>
<body>
 <div id="three"></div>
</body>
<script>
three.classList.add('red')
</script>

六、. 创建和删除DOM元素

1、创建元素：

createElement()方法，用于创建DOM元素

appendChild()方法，用于在当前DOM元素中添加子元素

给ul 添加li

button id="btn1">添加li元素</button>
<ul id="ul"></ul>

<script>
        // 获取ul对象
        let ul = document.querySelector('ul')
        // 给btn1注册点击事件
        document.querySelector('#btn1').onclick = function(){
            // createElement方法，用于创建DOM元素
            let li = document.createElement('li')
            li.innerHTML = '哈哈哈'
            // appendChild 方法，用于在当前元素中，添加子元素
            ul.appendChild(li)
        }
    </script>

添加表格

<button id="btn2">添加tr元素</button>
    <table>
        <tbody id="tbody">
        </tbody>
    </table>
<script>
 // 获取tbody对象
        let tbody = document.querySelector('#tbody')
        // 给btn2注册点击事件
        document.querySelector('#btn2').onclick = function(){
            // 创建一个tr元素
            let tr = document.createElement('tr')
            // 创造一个td元素
            let td1 = document.createElement('td')
            td1.innerHTML = '章三'
            let td2 = document.createElement('td')
            td2.innerHTML = '20岁'
            let td3 = document.createElement('td')
            td3.innerHTML = '女'
            // 把td添加到tr
            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            // 把tr添加到tbody上
            tbody.appendChild(tr)
        }
</script>

2.删除元素（自删，它删）

remove()方法，用于移除自己

removeChild()方法，用于移除指定的子元素

<style>
        .box1{
            width: 200px;
            height: 200px;
            border: 2px solid rebeccapurple;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 2px solid black;
        }
    </style>

 <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        // box2点击事件
        document.querySelector('.box2').onclick = function(){
            //事件方法里面的this，执行触发事件的源对象
            // remove()方法，用于移除自己
            this.remove()
        }
        // box1容器点击事件
        document.querySelector('.box1').onclick = function(){
            // 获取box2容器
            let box2 = document.querySelector('.box2')
            // removeChild()方法，用于移除指定的子元素
            this.removeChild(box2)
        }
    </script>

@菜鸟前端在进步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一.BOM&DOM

DOM相当于之前写的网页BOM相当于当前打开的浏览器窗口一.BOM 是浏览器对象模型其实就是之前使用过的window对象该对象身上有很多成员（属性和方法），这些属性和方法用于操作浏览器本身由于window对象是浏览器的默认对象，所以在使用它身上的成员时，可以省略window1.1各种弹框window.alert('消息框')window.prompt('请输入')window.confirm('确定删除吗？')2.打开和关闭窗口 open方法用于打开新窗口...
复制链接

扫一扫