学习js的第十天：DOM文档对象模型

最新推荐文章于 2022-11-10 23:29:35 发布

冰糖小果果

最新推荐文章于 2022-11-10 23:29:35 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/m0_68488342/article/details/126528752

版权

一、DOM文档对象模型

1.作用：提供操作html文档，html标签元素的能力

2.document文档对象，直接使用window.document

3.属性和方法：

方法：

1.获取标签元素的方法：

1>getElementById('id属性值')

<h2 id="title">DOM学习</h2>
function test(){
 var h2Ele=document.getElementById('tilte')
 console.log(h2Ele)
}test()

2>getElementByclassName('id属性值')

返回的是一个类数组（伪数组），不能使用Array的常用方法，但可以遍历。

<div class="title">DOM学习</div>
    <script>
        function test() {
            var divEle = document.getElementsByClassName('title')
            
            for(var i=0;i<divEle.length;i++){
                console.log('divEle[i]:',divEle[i])
            }
        }
        test()
    </script>

3>getElementsByTagName('标签名')

因为页面中可能有多个元素的标签名称一样，所有获取到的是一组元素

<div>DOM学习</div>
    <script>
        function test() {
            var divEle = document.getElementsByTagName('div')
            
            for(var i=0;i<divEle.length;i++){
                console.log('divEle[i]:',divEle[i])
            }
        }
        test()
    </script>

4>getElementsByName('name属性')

2.querySelector 和 querySelectorAll

1>querySelector类型

 <h2 id="title">DOM学习</h2>
    <script>
        function test() {
            var h2Ele = document.querySelector('#title')
            
                console.log('h2Ele:',h2Ele)
        }
        test()
    </script>

2>querySelectorAll类型

这个方法能获取到所有满足条件的元素，是以一个伪数组的形式返回

3.操作内容：

1.>获取元素内部的HTML结构 : 元素.innerHTML

2.>设置元素内容 : 元素.innerHTML='新内容'

列题：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>操作内容示例</title>
    <style type="text/css">
        body,
        input,
        div,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        .content {
            width: 550px;
            margin: 0 auto;
        }

        .content img {
            float: left;
            width: 150px;
        }

        .r {
            float: left;
            width: 400px;
        }

        input[name="changeBook"] {
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }

        input[name="season"] {
            width: 50px;
            text-align: center;
        }

        .input {
            border: 1px solid green;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="content">
        <img src="images/book.jpg" alt="岛上书店" />
        <div class="r">
            <div id="book">书名：岛上书店</div>
            <input id="updatename" name="changeBook" value="换换名称" type="button"
             onclick="onUpdateBookName()" /><br>

            四季名称：
            <input name="season" type="text" value="春" />
            <input name="season" type="text" value="夏" />
            <input name="season" type="text" value="秋" />
            <input name="season" type="text" value="冬" /><br><br>

            <input name="b2" type="button" value="input内容" onclick="onShowInput()" />

            <input name="b3" type="button" value="四季名称" onclick="onSeason()" />
            <input name="b4" type="button" value="清空页面内容" onclick="onClear()" />
            <p id="replace"></p>
        </div>
    </div>
    <script type="text/javascript">
        /*
          做什么?
            点击换换名称按钮，更换书名
            1. 绑定点击事件
            2. 更改名内容
        */
        function onUpdateBookName() {
         var divEle=document.querySelector('#book')
         divEle.innerHTML='书名：哈哈哈哈哈'
         console.log(divEle.innerHTML)
        }

        /*
          做什么?
            点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
            1. input内容按钮点击事件
            2. 将所有input标签内容值拼接成字符串
                 
            3. 操作p标签内容
        
        */
        function onShowInput() {
            var inputEle = document.querySelectorAll('input') 
            var str=''
            inputEle.forEach(function(item){ 
               str = str + item.value
            })
            console.log(str)
            var pEle=document.querySelector('p')
            pEle.innerHTML=str
            
           
        }
        /*
           做什么?
             点击四季名称按钮，拼接四季名称显示

        */
        function onSeason() {
          var inputContent=document.querySelectorAll('input[name="season"]')
          var str=''
          inputContent.forEach(function(item){
            str=str+item.value
          })
          var pEle=document.querySelector('p')
            pEle.innerHTML=str
        
        }

        function onClear() {
            document.write('')
        }

    </script>
</body>

</html>

3>innerText获取元素内部的文本（只能获取到文本内容，获取不到html标签）

可以设置元素的内部文本

会把<p>hello</p>当作一个文本出现在div元素里面，而不会把p解析成标签

value：操作表单元素 ==》表单的内容

 <input type="text">
    <script>
        function test() {
            var inputEle = document.querySelector('input')
            inputEle.value='哈哈哈'
            console.log(inputEle.value)
        }
        test()
    </script>

操作样式：

使用js代码动态操作样式

1.获取行内样式style:ele.style.样式名

 <h2 style="color: red;">hhhhhhh</h2>
    <script>
        function test() {
            var h2Ele=document.querySelector('h2')
            console.log(h2Ele.style.color)

        }
        test()
    </script>

2.设置样式：ele.style.样式名='要设置的值'

 <h2 style="color: red;">hhhhhhh</h2>
    <script>
        function test() {
            var h2Ele=document.querySelector('h2')
            h2Ele.style.color='green'
            console.log(h2Ele.style.color)

        }
        test()
    </script>

3.类样式：ele.className='类名'

注：后面的类名会覆盖前面的

<div class="box"></div>
    <script>
        function test() {
            var div=document.querySelector('div')
            console.log(div.className)

        }
        test()
    </script>

两个元素的情况：ele.classList.add(类名1)

ele.classList.add(类名2)

获取类样式：ele.getComputedStyle(元素).样式名

  <style>
        h3{
            width: 100px;
        }
    </style>
 <h3 class="box"></h3>
    <script>
        function test() {
            var h3Ele=document.querySelector('h3')
            console.log(window.getComputedStyle(h3Ele).width)

        }
        test()
    </script>

操作属性：

通过js代码动态获取属性或设置属性值

1.获取属性值：

1>ele.getAttribute('属性名')包括自定义属性

 <h3 id="box" a="active"></h3>
    <script>
        function test() {
            var h3Ele=document.querySelector('h3')
            var idEle=h3Ele.getAttribute('id')
            var idEle1=h3Ele.getAttribute('a')
            console.log(idEle,idEle1)

        }
        test()
    </script>

2>针对自身有的属性：ele.属性值

 <img src="http//"></img>
    <script>
        var imgEle=document.querySelector('img')
        console.log(imgEle.src)
    </script>

2.设置属性：

1>ele.setAttribute('属性名',"属性值")

<h3></h3>
    <script>
        function test() {
            var h3Ele=document.querySelector('h3')
            h3Ele.setAttribute('id','title')
            console.log(h3Ele)

        }
        test()
    </script>

2>ele.属性名=属性值

3.删除属性：ele.removeAttribute('属性名')

4.自定义属性：data-属性名 ==>获取属性值：ele.dataset.属性名

<h4 data-index="1001"></h4>
    <script>
        function test() {
            var h4Ele=document.querySelector('h4')
            var b=h4Ele.dataset.index
            console.log(b)
        }
        test()
    </script>

操作事件：

1.给元素绑定点击事件，直接给元素添加onclick属性实现属性事件

 <style>
        div{
            width: 100px;
            height: 100px;
        }
    </style>
<div></div>
    <button onclick="test()">按钮</button>
    <script>
        function test() {
            var div=document.querySelector('div')
            div.style.backgroundColor='pink'

        }
    </script>

2.元素和事件行为分离

 <div></div>
    <button>按钮</button>
    <script>
        function test() {
            var btn=document.querySelector('button')
            var div=document.querySelector('div')
            btn.onclick=function(){
                div.style.backgroundColor='pink'

            }

        }test()
    </script>