BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式

m-TT

已于 2022-10-30 17:22:08 修改

阅读量506

点赞数 3

分类专栏： js 文章标签：前端 javascript html

于 2022-10-29 20:30:21 首次发布

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127591314

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一.BOM的screen对象：返回当前窗口与屏幕相关的信息

1.属性：

（1）width/height：屏幕的宽度和高度

<script>
    console.log('当前窗口屏幕宽度',screen.width)
    console.log('当前窗口屏幕高度',screen.height)
</script>

(2)availWidth/availHeight:浏览器在屏幕中水平/垂直空间

<script>
    console.log('浏览器在屏幕中水平空间',screen.availWidth)
    console.log('浏览器在屏幕中垂直空间',screen.availHeight)
</script>

（3）colorDepth:屏幕颜色深度

<script>
    console.log('屏幕颜色深度',screen.colorDepth)
</script>

（4）pixelDepth：色彩深度

<script>
    console.log('色彩深度',screen.pixelDepth)
</script>

二.BOM的总结

1.浏览器对象模型：Browser Object Model

2.作用：提供了对浏览器进行操作的方法、属性

3.核心对象：window对象（重点）

4.其他对象：document、location、history、navigator、screen（既可以作为BOM对象独立使用，也可以作为window对象的属性使用）

三.JavaScript

1.ECMAScript:JavaScript的语法标准---ECMAScript5.0（简称ES5）、ECMAScript2015（简称ES6）

2.BOM：浏览器对象模型

3.DOM：文档对象模型

四.DOM

1.什么是DOM？

Document Object Model：文档对象模型

2.DOM的核心：document对象

3.DOM的作用：可以访问和操作XML和HTML文档中标签、属性、节点的属性和方法

4.在DOM中将整个HTML文档看作是一个倒立的树（树状结构）：一个html页面就是一个DOM对象，是一颗DOM HTML树

（1）DOM　HTML的根节点：html

（2）元素（Element）:html文档中的标签

（3）节点（Node）:html文档中的内容

5.DOM树中节点的分类：

（1）标签节点：所有的标签

（2）属性节点：标签的属性---内置属性、自定义属性

（3）文本节点：标签中的文本、换行、空格等

（4）注释节点：<!-- 注释内容

6.基本概念

（1）根节点：html,有且只能有一个

（2）子节点：某个节点的下一级节点

（3）父节点：某个节点的上一级节点

（4）兄弟节点：拥有相同父节点的节点

<body>
    <div id="box"></div>
    <script>
        let div = document.getElementById('box')
        console.log(div)
        console.log(div.__proto__)//__proto__:表示元素的原型
    </script>
</body>

五.通过document对象来操作html页面中的元素

1.getElementById('id值')：通过标签的id属性来获取标签

2.getElementsByName('name值')：通过标签的name属性来获取标签,返回值的是NodeList

3.getElementsByTagName('标签名')：通过标签名获取标签，返回值的类型是HTMLCollection

4.getElementsByClassName('class值')：通过标签的class值来获取标签，返回的类型是HTMLCollection

5.querySelector('#id值/.class值/标签名')：

#id值：返回一个指定id属性值的标签

.class值：返回第一个指定class属性值的标签

标签名：返回第一个指定标签名的标签

6.querySelectorAll('.class值/标签名')：

.class值：返回所有指定class属性值的标签。返回值的类型是NodeList

标签名：返回所有指定标签名的标签。返回值的类型是NodeList

<script>    
    let chk_arr1 = document.getElementsByName('chk')
    console.log(chk_arr1)
    let chk_arr2 = document.getElementsByTagName('input')
    console.log(chk_arr2)
    let arr = document.getElementsByClassName('pt')
    console.log(arr)
    let d1 = document.querySelector('#box')
    console.log(d1)
    console.log(d1.__proto__)
    let chk_arr3 = document.querySelectorAll('.pt')
    console.log(chk_arr3)
</script>

六.document对象的属性

1.document.body：返回文档的body元素

2.document.documentElement:返回文档的html元素

3.document.forms:返回文档的form(表单)对象

<body>
    <form action="#" method="get">
        用户名：<input type="text" name="userName"><br/>
        密码：<input type="password" name="pwd" id=""><br/>
        <input type="reset">
        <input type="submit">
    </form>
    <script>
        console.log(document.body)
        console.log(document.documentElement)
        console.log(document.forms)//返回的是集合，长度为1
        console.log(document.forms[0].tagName)//FORM
        console.log(document.forms[0].method)//get
    </script>
</body>

<body>
    <form action="#" method="get">
        用户名：<input type="text" name="userName" id="userName"><br/>
        密码：<input type="password" name="pwd" id="pwd"><br/>
    </form>
    <button type="button" id="btn_reset">重置</button>
    <button type="button" id="btn_sumbit">提交</button>
    <script>
        // 重置
        let reset = document.getElementById('btn_reset')
        reset.addEventListener('click',function (){
            document.getElementById('userName').value=''
            document.getElementById('pwd').value=''
        })
        // 提交
        let submit = document.getElementById('btn_submit')
        submit.addEventListener('click',function(){
            document.getElementById('userName').value=''
            document.getElementById('pwd').value=''
        })
    </script>
</body>

<body>
    <form action="server.html" method="get">
        <label>
            userName<input type="text" name="userName" id="userName">
        </label><br>
        <label>
            password<input type="password" name="pwd" id="pwd">
        </label>
        <br/>
        <button type="reset" id="btn_reset">重置</button>
        <button type="submit" id="btn_sumbit">提交</button>
    </form>
</body>

server.html

<script>
    console.log('URL:',location.href)
    console.log('主机名：',location.hostname)
    console.log('路径名：',location.pathname)
    console.log('请求字符串（参数）：',location.search)//location.search:存放的请求地址中参数部分
    console.log('端口号：',location.port)
    console.log('网络协议：',location.protocol)
    // 请求字符串
    let str1 = location.search//?userName=admin&pwd=123
    console.log('请求字符串（参数）：',str1)
    // 去掉最开始的？
    str1 = str1.substr(1,str1.length)
    console.log(str1)//userName=admin&pwd=123
    let str2 = str1.split('&')
    console.log(str2)// ['userName=admin', 'pwd=123']
    let str3 = str2[0].split('=')//['userName', 'admin']
    let str4 = str2[1].split('=')//['pwd','123']
    document.write(`<p>用户名：${str3[1]}</p>`)//用户名：admin
    document.write(`<p>密码：${str4[1]}</p>`)//密码：123
</script>

七.Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法

1.children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodeList的区别：

（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

<body>
    <p>四大传说</p>
    <ul id="ul">
        <li>梁山伯与祝英台</li>
        <li>白蛇传</li>
        <li>牛郎织女</li>
        <li>孟姜女哭长城</li>
    </ul>
    <script>
        let list = document.getElementById('ul')
        console.log(list.children)
    </script>
</body>

八.元素的属性和方法

1.属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

（2）innerText: 设置或返回元素中除去所有标签的内容（不能解析标签---不识别标签）

（3）textContent：设置或者返回指定节点的文本内容（不识别换行）

2.方法：

（1）document.write("html内容")：在文档中写入指定的内容

（2）document.writeln("html内容")：在文档中写入指定的内容(换行)

<body>
    <div id="dt1"></div>
    <div id="dt2">
        <p>大雁塔</p>
        <p>钟楼</p>
        回民街
    </div>
    <script>
        // document.getElementById('dt1').innerHTML='<h1>懒羊羊</h1>'
        // document.getElementById('dt1').innerHTML='<input type="text" value="懒羊羊">'
        // document.getElementById('dt1').innerText='<h1>懒羊羊</h1>'
        // document.getElementById('dt1').textContent='<h1>懒        羊羊</h1>'
        console.log(document.getElementById('dt2').innerText)
        console.log('------------------')
        console.log(document.getElementById('dt2').textContent)
    </script>
</body>

<script>
    document.writeln('<span>城墙1</span>')
    document.write('<span>城墙2</span>')
</script>

九.标签的属性

1.attributes:返回标签的所有属性集合

2.setAttribute(name,value):设置标签的属性值。参数name表示属性名，参数value表示属性值

3.getAttribute(name):获取标签的某个属性值。参数name代表属性名

4.removeAttribute(name):删除标签的某个属性。参数name代表属性名

<style>
    .new1{
        color: rgb(41, 7, 75);
        font-size: 30px;
        font-weight: 700;
    }
    .new2{
        color: red;
        font-size: 50px;
    }
</style>
<body>
    <div class="box" id="d1" name="mydiv" title="woniu">
        北大
    </div>
    <button id="btn">更改</button>
    <script>
       /*  console.log(document.getElementById('d1').attributes)
        console.log(document.getElementById('d1').setAttribute('title','北京')) */
        let change = document.getElementById('btn')
        let flag = true
        change.addEventListener('click',function(){
            if (flag) {
                flag = !flag
                document.getElementById('d1').setAttribute('class','new2')
            }else{
                flag = !flag
                document.getElementById('d1').setAttribute('class','new1')
            }
            
        })    
    </script>
</body>

练习：对input中输入练习：对input中输入的用户名进行验证。当用户名合法时在input后显示“用户名正确”，否则显示”用户名错误“

<style>
    .true1{
        color: green;
    }
    .false1{
        color: red;
    }
</style>
<body>
    <div class="login">
        <label>
            用户名：<input type="text" id="userName"><span id="msg"></span>
        </label>
        <br/>
        <button id="btn_check">验证</button>
    </div>
    <script>
        let check = document.getElementById('btn_check')
        check.addEventListener('click',function(){
            // 1.获取input的value
            let user = document.getElementById('userName').value
            // 2.对用户进行判断
            if (user === 'admin') {
                document.getElementById('msg').innerText='用户名正确'
                document.getElementById('msg').setAttribute('class','true1')
            }else{
                document.getElementById('msg').innerText='用户名错误'
                document.getElementById('msg').setAttribute('class','false1')
            }
        })
        document.getElementById('userName').getAttribute('type')
    </script>
</body>

十.元素的样式

1.用法：元素名.style.样式属性名

注意："样式属性名"在使用时需要将单词之间的'-'删除，将第二个单词的首字母大写

<body>
    <div id="demo"></div>
    <script>
        let div = document.getElementById('demo')
        div.style.width='200px'
        div.style.height='200px'
        div.style.backgroundColor='pink'
        div.style.borderRadius='50%'
    </script>
</body>

练习：改变盒子大小

① 编写HTML，设置div的大小。

② 根据用户的点击次数完成盒子大小的改变。

③ 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。

<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: peru;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: palevioletred;
    }
</style>
<body>
    <div id="box" class="div2">小</div>
    <script>
        let mydiv = document.getElementById('box')
        // 方法一：取反
        // let flag = true
        mydiv.addEventListener('click',function(){
            if (flag) {
                flag = !flag
                document.getElementById('box').innerText = '大'
                document.getElementById('box').setAttribute('class','div1')
            }else{
                flag = !flag
                document.getElementById('box').innerText = '小'
                document.getElementById('box').setAttribute('class','div2')
            }
        })
        /* // 方法二：计数器
        let count = 0
        mydiv.addEventListener('click',function(){
            count++
            if (count%2==1) {
                document.getElementById('box').innerText = '大'
                document.getElementById('box').setAttribute('class','div1')
            }else{
                document.getElementById('box').innerText = '小'
                document.getElementById('box').setAttribute('class','div2')
            }
        }) */
    </script>
</body>

m-TT

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式

BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式
复制链接

扫一扫