美文网首页
1 - 获取元素的选择器API

1 - 获取元素的选择器API

作者: 前端_冷羽 | 来源:发表于2018-11-12 13:36 被阅读0次

英语单词

advanced 高级

js组成

  • DOM
  • BOM
  • ECMAScript
  1. DOM: 操作HTML, CSS的API

  2. BOM: 操作浏览器的API

  3. ECMAScript: 是一套标准, 描述了基本语法和数据类型

id获取元素


document.getElementById('id名');

获取元素的属性和设置元素的属性


<body>

<div id="div1" class="big">myDiv</div>

</body>

<script>

var div = document.getElementById("div1");  // 根据id获取div

alert(div.id); // 获取div的id值

div.name = "show"; // 设置div的属性

div.style.color = "blue";

div.style.backgroundColor = "yellow"; // 在CSS里面是 - 分割属性, js是驼峰命名, zIndex, fontSize...

div.className += "bg-black";

</script>

根据标签名获取元素


<body>

<div>myDiv1</div>

<div>myDiv2</div>

<div>myDiv3</div>

</body>

<script>

// API: document.getElementsByTagName('标签名');

var divArr = document.getElementsByTagName('div');  // 获取全部div标签, 返回一个伪数组

console.log(divArr[0].innerText); // myDiv1  innerText就是获取元素的文本

console.log(divArr[1].innerText); // myDiv2

// 伪数组: 有数组的长度, 下标, 但是没有数组的方法, 比如sort,reverse...

</script>

根据类名获取元素


<body>

<div class="myDiv">myDiv1</div>

<div class="myDiv">myDiv2</div>

<div class="myDiv">myDiv3</div>

</body>

<script>

// API: document.getElementsByClassName('类名');

// 兼容性: IE8及以下不支持

var divArr = document.getElementsByClassName('myDiv');  // 获取全部类名myDiv, 返回一个伪数组

console.log(divArr[0].innerText); // myDiv1  innerText就是获取元素的文本

console.log(divArr[1].innerText); // myDiv2

</script>

根据name属性获取元素


<body>

<div name="myDiv">myDiv1</div>

<div name="myDiv">myDiv2</div>

<div name="myDiv">myDiv3</div>

</body>

<script>

// API: document.getElementsName('类名');

// 兼容性: IE8及以下不支持

var divArr = document.getElementsByName('myDiv');  // 获取全部类名myDiv, 返回一个伪数组

console.log(divArr[0].innerText); // myDiv1  innerText就是获取元素的文本

console.log(divArr[1].innerText); // myDiv2

</script>

根据选择器获取元素


<body>

<div class="myDiv" id="div1">myDiv1</div>

<div class="myDiv">myDiv2</div>

<div class="myDiv" id="div2">myDiv3</div>

</body>

<script>

// 选择器: CSS选择器

// API: document.querySelector('选择器');

// API: document.querySelectorAll('选择器');  // 这里多了All, 返回的是伪数组, 如果是类名

var myDiv = document.querySelector('#div1'); // 获取id为div1的元素

var divArr = document.querySelectorAll(".myDiv"); // 因为类名相同有很多, 用这个可以获取全部

var myDiv2 = document.querySelector('.myDiv'); // 如果用的不是All的API, 那么只会返回第一个类名为myDiv

console.log(myDiv2.innerText); // myDiv1

</script>

事件简介

元素.事件 = 结果


<body>

<div id="div1">myDiv1</div>

</body>

<script>

// 根据id获取div

var myDiv = document.getElementById("div1");

// 元素 div

// 事件 onclick 鼠标单击, 还有很多事件, 例如: onmouseover(鼠标移入), onmouseout(鼠标移出)...

myDiv.onclick = function() {

// 结果: 触发了事件要有什么改变, 这里我就把div字体颜色改变和body的背景颜色改变

    myDiv.style.color = "red";

    // body元素的专属获取: document.body, html元素就是: document.documentElement

    document.body.style.backgroundColor = "pink"; 

}

</script>

实际应用

id应用场景 :

  1. 重用代码(2个元素用相同的效果, 只要改变id就行)
  1. 写不同的效果(这个div写开灯关灯, 那个div写选项卡...)

<!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 media="screen">

        li {list-style-type: none;}

        *{margin: 0;padding: 0;}

        .box {width: 200px;overflow: hidden;}

        .box ul {height: 50px;}

        .box ul li {float: left;width: 50px;text-align: center;line-height: 50px;height: 50px;background-color: red;color: #fff;}

        .box ul li:hover {background-color: #000;}

        .tab-box {width: 5000px;height: 200px;}

        .tab-box div {float: left;width: 200px;height: 200px;background-color: #000;color: #fff;}

        .box .bg-black {background: #000;}

    </style>

</head>

<body>

<div class="box" id="box">

        <ul class="tab-nav">

            <li>nav1</li>

            <li>nav2</li>

            <li>nav3</li>

            <li>nav4</li>

        </ul>

        <div class="tab-box">

            <div>1111</div>

            <div>2222</div>

            <div>3333</div>

            <div>4444</div>

        </div>

    </div>

</body>

<script>

// 选项卡核心原理: 就是设置一个自定义属性从0开始, 然后通过这个自定义属性显示对应下标的div

    tab('box', 'tab-nav', 'tab-box'); // 封装成一个函数, 可以重用代码

    // tab(); 只要把名字改一下继续调用即可, 结构不变

    function tab(box, tabNav, tabBox) {

        /**

            @parmer

                box : 大盒子

                tab-nav : 导航

                tab-box : 内容

        */

        var box = document.getElementById(box); // 获取大盒子

        var liList = box.getElementsByClassName(tabNav)[0].getElementsByTagName("li"); // 获取导航的li标签

        var tabList = box.getElementsByClassName(tabBox)[0].getElementsByTagName("div"); // 获取内容的div标签

        for (var i = 0; i < liList.length; i++) {

            liList[i].index = i;  // 设置索引

        }

        for (var i = 0; i < liList.length; i++) {

            liList[i].onmouseover = function() {  // 给每个li标签添加鼠标移入事件

                for (var j = 0; j < liList.length; j++) {  // 移入之后先把所有的li标签的类名清除和内容的div标签隐藏

                    liList[j].className = "";

                    tabList[j].style.display = "none";

                }

                this.className = "bg-black"; // 然后当前的设置

                tabList[this.index].style.display = "block"; // 当前的索引给tabList这个数组, 然后通过索引显示div标签
            }

        }

    }

</script>

</html>

name应用场景


<form class="" action="index.html" method="post">

  用户名: <input type="text" name="user">

  密码: <input type="password" name="pwd">

  <input type="submit">

</form>

<script>

  // 根据name选择器选择元素一般用在表单内

  var formInput = document.getElementsByName('user');

  var formInput = document.getElementsByName('pwd');

  console.log(formInput);

</script>

类名选择器 和 选择器选择元素, 看实际情况, 如果要求兼容IE, 那就任意使用

相关文章

  • jQuery1-004 API-选择器

    1、jQuery基础选择器 1.1、jQuery获取元素的统一方式 通过$('选择器')获取元素,获取的元素以伪数...

  • 1 - 获取元素的选择器API

    英语单词 advanced 高级 js组成 DOM BOM ECMAScript DOM: 操作HTML, CSS...

  • 1-1JQuery获取元素和常用方法

    jQuery获取元素的方式:通过各种选择器来获取元素(类似于css获取标签)基本选择器1.根据id来获取-----...

  • jQuery-01

    版本1 选择器 获取元素的索引值 1

  • javascript之“获取元素”

    老式选择器 通过 id选择器 选择元素 通过 name属性 来获取元素数组(获取表单) 通过 标签名 来获取元素数...

  • jq

    1.选择器获取元素$("")//里面放字符串--选择器 2.原生对象与jq对象之间的转化 注意:(1)通过jq获取...

  • DOM 选择器

    DOM中的选择器 1.getElementById(id) //获取指定元素的ID元素 2.getEl...

  • 一、网页重构

    1、表单: 点击用户名可以获取焦点。 2、CSS选择器: 元素选择器 h1 img p类选择器 .classN...

  • jQuery--DOM操作(一)

    通过jQuery的选择器可以方便的获取页面上的元素,通过选择器获取到的,不管是多个元素、零个元素还是一个元素,都会...

  • 元素选择

    0 简述 在操作任何元素之前,首先要获取元素,因此,元素选择是其他一切操作的基础 1 选择器选择 通用选择器、ID...

网友评论

      本文标题:1 - 获取元素的选择器API

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