JavaScript：DOM获取结点的方法

最新推荐文章于 2024-05-24 13:39:19 发布

ForestSpringH

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量226

点赞数

分类专栏：前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59588838/article/details/127310753

版权

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

js中获取dom结点的方法有很多，根据类选择器，id选择器是最常用的方法，当然还可以根据标签的name值进行结点的绑定。

具体的操作看以下代码：

<body>
    <!-- 操作选人 -->
    <button>选人</button>
    <div style="color:aqua"></div>
    <button class="button1">点击弹窗</button>
    <button id="button2" onclick="btn2()">点击警告</button>
    <button name="button3">点击获取年纪</button>
    <script>
        // 可以根据类选择器，Id选择器找到结点
        let button =  document.querySelector('button')
        let button1 = document.querySelector('.button1')
        let button2 = document.querySelector('#button2')
        // 这个是查到所有的相关标签组成的伪数组，可以按照索引找到它，从0开始
        let button3 = document.querySelectorAll('button')[3]
        let div = document.querySelector('div')
        let name 
        let arr = ['张飞','赵云','刘备','关羽','马超']
        //获取随机数，从min开始到max-1结束，不含有max
        function getRandom(min, max) {
            return parseInt(Math.random()*(max - min) + min)
        }
        let num  = 0
        //模拟随机值的出现
        button.addEventListener('click',function(){
              name = arr[getRandom(0,5)]
              div.innerHTML = `<h1>${name}</h1>`
        })
        button1.onclick = function(){
            alert('你在点击我')
        }
       function btn2(){
            confirm('你在提醒我')
        }
        button3.onclick = function(){
            let age = prompt('请输入你年纪：')
            //可以通过修改对象属性的方法直接对结点的属性进行修改
            button3.innerHTML = `你的年纪是${age}`
        }
    </script>
</body>