DOM-获取元素

6天前 61次浏览 已收录 0个评论

如何获取页面元素

  • 根据ID获取
  • 根据标签名获取
  • 通过H5新增的方法获取
  • 特殊元素获取

根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象

语法:

var element = document.getElementById(id);
<!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>id</title>
</head>
<body>
    <div id="time">2021</div>
    <script>
        var timedata=document.getElementById('time');
        console.log(timedata);
        // console.dir(timedata) 打印返回的元素对象,更好的查看里面的属性和方法
    </script>
</body>
</html>
结果演示

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合,返回的是获取过来元素对象的集合,以伪数组的形式存储的。

语法:

document.getElementsByTagName('li')
<!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>
</head>
<body>
    <ul id='lb'>
        <li>渣渣龙</li>
        <li>渣渣龙2</li>
        <li>渣渣龙</li>
        <li>渣渣龙</li>
        <li>渣渣龙</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        // 返回的是获取过来元素对象的集合,以伪数组的形式存储的,如果页面中没有这个元素,返回的是空的伪数组
        console.log(lis[1]);

        // 获取标签元素的不同方法
        //通过父级元素获取
        // var ul = document.getElementsByTagName('ul'); //[ul]
        // console.log(ul[0].getElementsByTagName('li'));
        //通过父级ID获取
        // var ul = document.getElementById('lb');
        // console.log(ul.getElementsByTagName('li'));
    </script>
</body>
</html>
结果演示

通过H5新增的方法获取(推荐)

语法:

document.getElementsByClassName('类名') //返回集合
document.querySelector('选择器') //返回第一个元素的对象 ( 标签 .类 #选择器)
//var ip=document.querySelector('div');
document.querySelectorAll('选择器') //返回指定选择器的所有元素,和第一个getElementsByClassName一样

获取特殊元素

获取body元素

document.body;

获取html元素

document.documentElement;

自定义属性的操作

自定义属性的目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。自定义属性名字按照H5的规范,即data-名字

element.gerAttribute(‘属性’) //自己添加的属性,成为自定义属性.,和上面获取元素操作有以下区别:

  • 上面写的都是获取内置属性值(元素本身自带的属性,比如src、type等)
  • 而element.getAttribute(‘属性’) 主要获取自己定义的属性
<div data-zdyid="demo" data-zdy="1"></div>
    <script>
        var d=document.querySelector('div');
        var d1=d.getAttribute('data-zdyid');//获取自定义属性
        var d2=d.getAttribute('data-zdy');
        //var d2=d.dataset.zdy;
        d2.setAttribute('data-zdy',2); //主要针对自定义属性的设置值,设置d2里面的属性data-zdy为2。
        //当然也可以修改元素自带的属性,以及可以自己新定义一个属性值
    </script>
  • 移除属性 d2.removeAttribute(‘zdy’);

案例

分析:

  • tab栏切换有2个大的模块
  • 上面的模块选项卡,点击某一个,当前底色变红色,其余不变(排他思想)修改类名
  • 下面的模块内容,会跟随上面的选项卡变化,所以下面模块变化写到点击事件里面
  • 下面模块显示内容与上面的选项卡一一对应,
  • 核心思路:给上面的tablist里面的所有li添加自定义属性,属性值从0开始编号
  • 当点击tablist里面的某个li,让模块里面对应序号里的内容显示,其余隐藏(排他思想)
<script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                // console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:DOM-获取元素
喜欢 (0)

您必须 登录 才能发表评论!