美文网首页
获取元素

获取元素

作者: 潘肚饿兵哥哥 | 来源:发表于2020-09-11 23:41 被阅读0次

\color{rgba(254, 67, 101, .8)}{获取页面元素}

DOM在我们实际开发中主要用来操作元素

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

\color{rgba(254, 67, 101, .8)}{获取ID:}

get 获得 element 元素 by 通过 驼峰命名法
参数有一个,是字符串
返回的是元素对象
\color{rgba(254, 67, 101, .8)}{用console.dir();可以看到这个对象中的属性和方法 }

    <div id="time">2020-09-09</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </script>
image.png image.png

\color{rgba(254, 67, 101, .8)}{根据标签名获取某些元素}

getElementsByTagName();方法可以返回带有指定标签名的
\color{rgba(254, 67, 101, .8)}{对象的集合}
返回值是 获取过来的元素对象的集合,以伪数组的形式存储的

    <ul>
        <li>知否知否,应是等你好久</li>
        <li>知否知否,应是等你好久</li>
        <li>知否知否,应是等你好久</li>
        <li>知否知否,应是等你好久</li>
        <li>知否知否,应是等你好久</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]); //获取第一个元素
        console.log(typeof lis);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{想要打印里面的元素对象可以用遍历}
\color{rgba(254, 67, 101, .8)}{注意:}

1.因为得到的额是一个对象的集合,所以我们要操作里面的元素就需要遍历
2.得到的元素对象是动态的(不需要改动代码就可以拿到新的变动内容)
3.如果页面中只有一个li,返回的还是伪数组的形式
4.如果页面中没有这个元素,返回的是空的伪数组

    <ul>
        <li>知否知否,应是等你好久1</li>
        <li>知否知否,应是等你好久2</li>
        <li>知否知否,应是等你好久3</li>
        <li>知否知否,应是等你好久4</li>
        <li>知否知否,应是等你好久5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]); //获取第一个元素
        console.log(typeof lis);

        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{document.getElementsByTagName('li')是获取整个文档的li}

如果要精确的获取标签,就要用另一个函数:

\color{rgba(254, 67, 101, .8)}{获取某个元素(父元素)内部所有指定标签的子元素}

element.getElementsByTagName('标签名');

注意:父元素必须是\color{rgba(254, 67, 101, .8)}{单个对象(必须指明是哪一个对象元素)},获取的时候不包括父元素自己

给父元素一个id,拿到父元素deid之后,通过id去拿子元素,如下:

   <ul>
        <li>知否知否,应是等你好久1</li>
        <li>知否知否,应是等你好久2</li>
        <li>知否知否,应是等你好久3</li>
        <li>知否知否,应是等你好久4</li>
        <li>知否知否,应是等你好久5</li>
    </ul>

    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
   

    <script>
        //如果ol里也有li,获取方法:
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{通过H5新增方法获取元素}

1.document.getElementsByClassName('类名'); 根据类名返回元素对象集合
2.document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
3.document.querySelectorAll('选择器'); 返回指定选择器的所有对象集合
这三种方法要加符号:.class #id

\color{rgba(254, 67, 101, .8)}{document.getElementsByClassName('类名');}

    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //1.通过类名获取元素,这是H5新增的方法IE9以上
        //document.getElementByClassName根据类名获取元素
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{document.querySelector('选择器'); }

根据指定选择器返回第一个元素对象

    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //1.通过类名获取元素,这是H5新增的方法IE9以上
        //document.getElementByClassName根据类名获取元素
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        //.document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
    </script>
image.png
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //1.通过类名获取元素,这是H5新增的方法IE9以上
        //document.getElementByClassName根据类名获取元素
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        //.document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
        //选class
        var firstBox = document.querySelector('.box');
        console.log(firstBox);

        //选id,会把nav这个id里的元素全部拿到
        var nav = document.querySelector('#nav');
        console.log(nav);
    </script>
image.png
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //document.querySelectorAll('选择器');返回指定选择器的所有对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{获取特殊元素body、html}
\color{rgba(254, 67, 101, .8)}{获取body元素}

    <script>
        //1.获取body元素,其他的都可以通过起类名或id,但是这两个特殊,一个页面只有一个
        var bodyEle = document.body;
        console.log(bodyEle);

        //2.获取html元素
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{获取html元素}

    <script>
        //1.获取body元素,其他的都可以通过起类名或id,但是这两个特殊,一个页面只有一个
        var bodyEle = document.body;
        console.log(bodyEle);

        //2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
image.png

相关文章

  • jQuery篇之操作jQuery对象(样式)

    获取/设置 元素内容 获取/设置 元素属性 获取/设置 元素样式 获取/设置 元素位置和大小

  • DOM笔记

    DOM笔记获取元素获取指定元素获取子元素&兄弟元素&父元素获取第一&最后一个子元素节点操作克隆节点 - clone...

  • [前端学习]jquery部分学习笔记,第二天

    获取操作兄弟元素 元素.next()获取该元素下一个兄弟元素 元素.nextAll()获取该元素后面的所有兄弟元素...

  • 获取元素

    一.获取元素: 1.通过id来获取元素 2.根据标签名获取元素 3.根据类名来获取元素 4.获取body 元素和获...

  • 获取元素

    html代码示例: javascript获取元素 通过id获取元素 通过TagName获取元素 通过ClassNa...

  • 获取元素和事件注册

    1、获取元素 获取body元素可以直接通过:document.body获取获取html元素可以直接通过:docum...

  • JS中API的使用方法

    1,1获取元素 1.1.1 根据ID获取 1.1.2 根据标签名获取元素 1.1.3 H5新增获取元素方式 ...

  • JavaScript获取dom元素

    获取dom元素的方法 通过标签名获取dom元素 通过id名获取dom元素 通过类名获取元素 HTML5新方法 通过...

  • JS工具类函数封装

    根据id获取元素 获取css样式 通过标签名获取元素 通过class获取元素 运动函数 类数组转数组方法 获取n-...

  • appium应用之“获取元素信息和元素操作”(android)

    一、获取元素信息 get_attribute(name)name:元素的属性名 1. 获取元素属性值 获取元素的t...

网友评论

      本文标题:获取元素

      本文链接:https://www.haomeiwen.com/subject/hhopektx.html