JavaScript学习笔记10

最新推荐文章于 2024-05-21 15:32:45 发布

Amy_cx

最新推荐文章于 2024-05-21 15:32:45 发布

阅读量377

点赞数 1

文章标签：学习 javascript

本文链接：https://blog.csdn.net/Amy_cx/article/details/126548926

版权

一、DOM（文档对象模型）

作用：提供操作html文档、html标签的能力。

window.document document可以省略。

方法：

1.获取标签元素的方法

getElementById('id名')           id名唯一

getElementsByClassName('类名')           返回类数组（伪数组）

        类数组和数组Array区别
                    1.类数组不能使用Array的常用方法
                        push pop splice……
                    2.类数组可以遍历，可使用[]访问元素

getElementsByTagName('标签名')
getElementsByName('name属性值') 根据name属性

2.querySelector 和 querySelectorAll 【推荐使用】

queryselector() 只返回一个元素
querySelectorAll() 返回所有元素存储在类数组里面

复习一下css选择器：

        2.1基本选择器
                    标签
                    id class
        2.2层级选择器
                    子代选择器
                    后代选择器
                    M>N
                    M N
                    兄弟选择器
                    M~N M+n
       2.3伪类选择器
                    M N:nth-child(n)
       2.4属性选择器
                    input[name]
                    input[name='username']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM</title>
    <!--
        DOM  文档对象模型   document object model
        操作html中标签的能力
    -->
</head>
<body>
    <h2 id="title">DOM学习</h2>
    <div class="d1">元素一</div>
    <div class="d1">元素一</div>
    <div class="d2">元素3</div>
    <input type="text" name="username">
    <script>
        function test1(){
            var h2Ele = document.getElementById('title') //id名为title的
            console.log(h2Ele)
        }
        test1()

        function test2(){
            var divEles = document.getElementsByClassName('d1')  //类名为d1的
            console.log(divEles)
            for(var i =0; i < divEles.length; i++){
                console.log(divEles[i])
            }
        }
        test2()

        function test3(){
            var divEles = document.getElementsByTagName('div')  //标签为div的
            console.log(divEles)
        }
        test3()

        function test4(){
            var h2Ele = document.querySelector('#title') //id名为title的
            console.log(h2Ele)
        }
        test4()

        function test5(){
            // var divEles = document.querySelector('.d1')
            var divEles = document.querySelectorAll('.d1') //所有类名为d1的
            console.log(divEles)
        }
        test5()

        function test6(){
            var inName = document.getElementsByName('username')  //属性名为username的
            console.log(inName)
        }
        test6()
    </script>
</body>
</html>

二、操作内容

innerHTML 和 innerText

<h2 id="title">元素一</h2>

<script>
            var h2Ele = document.querySelector('#title')
            h2Ele.innerHTML //获取内容
            h2Ele.innerHTML='新内容' //设置内容

            //innerHTML返回的是它设置的内容

            //innerText 以纯文本形式显示

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作内容</title>
</head>
<body>
    <!-- 
        操作非表单元素 innerText 和 innerHTML
        操作表单元素 value 
    -->
    <h2 id="title">元素一</h2>
    <h2 class="title">元素二</h2>
    <input type="text" name="message" placeholder="请输入内容" value="rose">
    <script>
        function test1(){
            var h2Ele1 = document.querySelector('#title')
            var h2Ele2 = document.querySelector('.title')
            console.log('内容:',h2Ele1.innerHTML); //输出获取到的内容：内容：元素一
            console.log('内容:',h2Ele2.innerText); //输出获取到的内容：内容：元素二
            h2Ele1.innerHTML='<h3>innerHTML设置的内容</h3>'  //页面显示设置的内容：innerHTML设置的内容
            h2Ele2.innerText='<h3>innerText设置的内容</h3>'  //页面显示纯文本：<h3>innerText设置的内容</h3>
        }
        test1()
        function test2(){
            var inputEle = document.querySelector('input[name="message"]')
            inputEle.value='jack'  //覆盖掉默认value值rose为jack
            console.log(inputEle.value)
        }
        test2()
    </script>
</body>
</html>

三、操作样式

使用js代码动态操作样式

        1.获取行内样式style
                element.style.样式名
                =>样式值
                element.style.样式名 = 样式值
        2.类样式
                (1)element.className='类名'
                注：一次设置多个类名用空格隔开；同一个元素多次设置，后面的类名会覆盖前面的类名。

(2)element.classList

通过ClassList 可以获取元素的全部类名
通过ClassList.remove() 可以删除元素的一个或多个类名
通过ClassList.add() 可以向元素添加一个或多个类名，多个用逗号隔开
通过ClassList.lentgh 可以获取到元素类名的数量
通过ClassList.item(x) 可以获取到元素类名索引为x的类名
通过ClassList.toggle() 可以为元素切换类;若检测到没有设置的类就添加，若检测到有设置的类就删除
通过ClassList.contains(x) 查看元素是否存在类名为"x"的类,有就返回true

                获取非行间样式
                window.getComputedStyle(元素).样式名
                =>样式值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .d1 {
            width:200px;
            height:200px;
            background-color:
            skyblue;
        }
        .colorBlue{
            color: blue;
        }
    </style>
</head>
<body>
    <h2 style="color:red;">操作样式</h2>
    <div class="div1">元素一</div>
    <h3 class="d3">元素二</h3>
    <p></p>
    <button onclick="getStyleTest()">获取style样式</button>
    <button onclick="setStyleTest()">设置style样式</button>

    <button onclick="setClassStyle()">设置class样式</button>
    <button onclick="getClassStyle()">获取非行间样式</button>
    <script>
        //获取h2标签的行内样式
        function getStyleTest() {
            var h2Ele = document.querySelector('h2')
            var colorValue = h2Ele.style.color //行内式，获取样式中颜色属性的属性值
            var pEle = document.querySelector('p')
            pEle.innerHTML = colorValue
        }
        function setStyleTest() {
            var h2Ele = document.querySelector('h2')
            h2Ele.style.color = 'green' //为h2设置颜色为绿色
        }
        function setClassStyle(){
            var divEle = document.querySelector('div')
            // divEle.className = 'd1'
            // divEle.className = 'd1 d2' //设置两个类名
            divEle.classList.add('d1')
            console.log(divEle.classList)
        }
        function getClassStyle(){
            var h3Ele = document.querySelector('h3')
            var w = window.getComputedStyle(h3Ele).width //获取h3的宽度样式
            console.log('w :',w);
        }

        var divEle = document.querySelector(".div1")
        divEle.onclick = function(){ 
        //点击类名为div1的元素，如果它有类colorBlue就清除colorBlue设置的样式，没有就加上
            divEle.classList.toggle('colorBlue')
        }
    </script>
</body>
</html>

四、操作属性

            js代码动态获取属性值或设置属性
            1.获取属性值
                element.getAttribute('属性名')
                =>属性值
                element.属性必须是本身拥有的属性
                =>属性值
            2.设置属性
                element.setAttribute('属性名','属性值')
                element.属性名=属性值
            3.删除属性
                element.removeAttribute('属性名')
                element.属性名=属性值
            4.data-属性名   自定义属性格式
                element.dataset.属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作属性</title>
</head>
<body>
    <h2 id="title" class="d1" a="100" b="200">元素一</h2>
    <h3>元素二</h3>
    <a href="http://www.baidu.com">百度</a>
    <img src="./岛上书店/images/11239.png" alt="图片">
    <img src="" alt="图片2">
    <!--自定义属性-->
    <h4 data-index="1001" data-score="98">元素三</h4>
    
    <button onclick="getAttr()">获取属性</button>
    <button onclick="setAttr()">设置属性</button>
    <button onclick="removeAttr()">移除属性</button>
    <button onclick="getMyAttr()">获取自定义属性</button>
    
    <script>
        function setAttr(){
            var h3Ele = document.querySelector('h3')
            h3Ele.setAttribute('id','title') //id='title'
            h3Ele.setAttribute('a','1000') //自定义属性a=1000
            var imgEle = document.querySelectorAll('img')[1] //下标从0开始
            // imgEle.setAttribute('src','./岛上书店/images/book.jpg')
            imgEle.src='./岛上书店/images/book.jpg'
        }
        setAttr()

        function getMyAttr(){
            var h4Ele = document.querySelector('h4')
            var index =  h4Ele.getAttribute('data-index') //获取自定义属性的属性值
            var score =  h4Ele.dataset.score //获取自定义属性的属性值
            console.log(index) //1001
            console.log(score) //98
        }
        getMyAttr()

        function removeAttr(){
            var h2Ele = document.querySelector('h2')  // 获取h2元素
            h2Ele.removeAttribute('a') //删除自定义的a属性
        }
        removeAttr()

        function getAttr(){
            var imgEle = document.querySelector('img')  // 获取img元素
            var idValue =  imgEle.getAttribute('src')  // 获取img元素src属性值
            console.log(idValue) //./岛上书店/images/11239.png
            console.log(imgEle.src)
        }
        getAttr()
    </script>
</body>
</html>

五、操作事件

给元素绑定点击事件

直接给元素添加onclick属性实现
绑定事件：

（1）属性事件

（2）元素和事件行为分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作事件</title>
     <style>
         div{
             width: 90px;
             height: 20px;
             border: 1px solid #000;
             text-align: center;
             margin-top: 10px;
             border-radius: 10px;
         }
         div:hover{
            cursor: pointer;
         }
     </style>
</head>
<body>
    <button>按钮</button>
    <div>点击试试</div>

    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(){
            alert('绑定事件')
        }

        var divEle = document.querySelector('div')
        divEle.onclick = function(){
            divEle.innerHTML = '今天是周五'
        }
    </script>
</body>
</html>

Amy_cx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记10

DOM文档对象模型、getElementById、querySelector、操作内容（innerHTML、innerTextvalue）、操作样式（className、classList、getComputedStyle）、操作属性（getAttribute、removeAttribute、dataset）、操作事件（绑定onclick）...
复制链接

扫一扫