前端猫

# 获取元素

# - getElementById

作用：用于获取一个基于唯一的ID的元素。

用法：getelementById(id),接受一个你要获取的id参数，如果找到相应的元素则返回该元素，如果找不到就返回null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 因为我们文档页面从上往下加载，所以将script写在这里，是无法获取DOM元素的
        const el = document.getElementById("one");
        console.log(el);// null
    </script>
</head>
<body>
    <div id="one">大家好，我叫刘德华！</div>
    <div id="three">大家好，我叫张学友！</div>
    <div id="three">大家好，我叫郭富城！</div>
</body>
<script>
    // 1- getElementById是document对象下的一个方法
    // 2- getElementById采用的是驼峰命名法
    // 3- 参数id对大小写敏感
    
    // 传入id
    console.log(document.getElementById("one"));

    // 返回值是元素对象
    console.log(typeof document.getElementById("one"));

    // 将返回的对象赋值给一个变量
    var el = document.getElementById("one");
    console.log(el);

    // 如果指定了ID,但是没有与其匹配的元素，那么返回null
    var el = document.getElementById("two");
    console.log(el);// null

    // 如果有两个ID(不规范)，只会取第一个。
    var el = document.getElementById("three");
    console.log(el)

</script>
</html>

# - getElmentsByTagName

作用：用于获取对应name名的所有元素

用法：getElementsByName(tagname),接受一个你要获得name名的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h3>小说</h3>
    <ul>
        <li>武侠：《射雕英雄传》、《小李飞刀》</li>
        <li>言情：《还珠格格》、《霸道总裁爱上你》</li>
        <li>玄幻：《斗罗大陆》、《斗破苍穹》</li>
    </ul>
</div>
</body>
<script>
    // 返回的是对象的集合,以伪数组的形式存储的
    var lis = document.getElementsByTagName("li");
    console.log(lis);
    console.log(lis.length);// 3 长度

    // 遍历
    var lis = document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        // 根据下标获得DOM元素
        console.log(lis[i])
    }

    // 可以通过Array.from方法将伪数组转为真数组
    var lis = document.getElementsByTagName("li");
    console.log(Array.from(lis));// 转换为真数组
    // forEach进行遍历
    Array.from(lis).forEach(function (item,index){
        console.log(item,index);
    })

    // 如果没有对应的元素，得到的是一个空的伪数组。
    var my = document.getElementsByTagName("span");
    console.log(my);// 得到的是一个空的伪数组

    // 可以通过下标获得伪数组的元素
    var h3 = document.getElementsByTagName("h3");
    console.log(h3);// 伪数组
    console.log(h3[0]);// 得到下标为1的元素

    // 获得的元素的顺序与文档中出现的标签顺序相同
    var my = document.getElementsByTagName("li");
    console.log(my[0]);
    console.log(my[1]);
    console.log(my[2]);

    // 可以通过传递*可以获得文档中的所有DOM元素
    var all = document.getElementsByTagName("*");
    console.log(all);
</script>
</html>

# - h5新增加获取元素方法

h5新增加获取元素方法不兼容IE678

# - getElementsByClassName

作用：用于获取对应class名的所有元素

用法：getElementsByClassName(classname),接受一个你要获得class名的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName</title>
    <style>
        .bg {
            background: green;
        }

        .cl {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p class="bg">医人买得医官札付者，冠带而坐于店中。</p>
        <p class="bg cl">过者骇曰：“此何店，而有官在内？”旁人答曰：“此医官之店（嘲衣冠之店）。”</p>
    </div>
    <script>
        // 1- getElementsByClassName是document对象下的方法，
        // 2- 该方法接收class名字，返回一个伪数组（如果说没有找到返回提一个空的伪数组。）
        console.log(document.getElementsByClassName("bg"));
        console.log(document.getElementsByClassName("bg cl"));
        console.log(document.getElementsByClassName("bg")[0]);
        console.log(document.getElementsByClassName("cl")[0]);
        console.log(document.getElementsByClassName("bg cl")[0]);
    </script>
</body>

</html>

# - getElementsByName

作用：用于获取对应name名的所有元素

用法：getElementsByName(name),接受一个你要获得name名的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p class="one" id="one" name="one">一医久无生意，忽有求药者至。</p>
    <p name="one">开箱取药，中多蛀虫。</div>
    <p name="two">人问“此是何物？”曰：“僵蚕。”又问：“僵蚕如何是活的？”答曰：“吃了我的药，怕他不活？”</p>
    <form action="">
        <input type="text" name="userName">
    </form>
</body>
<script>
    // name属性常用于表单元素。
    // console.log(document.getElementsByName("one"))
    // console.log(document.getElementsByName("two"))
    // console.log(document.getElementsByName("three"))
    // console.log(document.getElementsByName("userName"))

    // 注意:
    var oneName = document.getElementsByName("one")[0];
    var oneId = document.getElementById("one");
    var oneClass = document.getElementsByClassName("one")[0];
    var oneTag = document.getElementsByTagName("div")[0];
    console.log(oneName === oneId);// true
    console.log(oneName === oneClass);// true
    console.log(oneName === oneTag);// true
</script>
</html>

# - querySelector

作用：返回文档中匹配指定 CSS 选择器的一个元素

用法: document.querySelector(selectors)

注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background:red;
        }
    </style>
</head>
<body>
    <div>
        <p id="one" class="my">我确定你就是那只匹着羊皮的狼</p>
        <p id="two">我爱你中国，我亲爱的母亲，我为你流泪，也为你自豪</p>
        <input type="text" name="userName">
    </div>
</body>
<script>
    // 1- 根据标签获取第一个p元素
    // const pEl = document.querySelector("p");
    // console.log(pEl)

    // 2- 根据ID获取第一个元素
    // console.log(document.querySelector("#one"));
    // console.log(document.querySelector("#two"));

    // 3- 根据className获取元素
    // console.log(document.querySelector(".my"))

    // 4- 根据属性获得元素
    // console.log(document.querySelector("input[name=userName]"));
    
    // 5-分步骤获得元素：
    // 5-1-根据ID获得元素
    // var twoEl = document.querySelector("div");
    // 5-2-在获得元素的基础上，再次使用querySelector
    // var twoLiEl = twoEl.querySelector("#two");
    // console.log(twoLiEl);
</script>
</html>

# - querySelectorAll

作用： querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素

用法： querySelectorAll(selectors)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <ul id="one">
            <li>梨树1</li>
            <li>桃树1</li>
            <li>杏树1</li>
            <li>葡萄1</li>
        </ul>
        <ul id="two">
            <li>梨树2</li>
            <li>桃树2</li>
            <li>杏树2</li>
            <li>葡萄2</li>
        </ul>
    </div>
</body>
<script>    
    // 1- 获得所有的ul元素：返回的是一个伪数组(集合NodeList)
    // console.log(document.querySelectorAll("ul"));

    // 2- 获得所有的li
    // console.log(document.querySelectorAll("li"));

    // 3- 获取id为one元素下的所有li,并遍历
    // document.querySelectorAll("#one li").forEach(function (item){
    //     console.log(1,item);
    // })

    // 4- 可以获得长度
    // console.log(document.querySelectorAll("#two li").length);// 4

    // 不支持map:map is not a function
    // document.querySelectorAll("#two li").map(function (item){
    //     console.log(item)
    // })

    // 5- 可以将伪数组转为真数组
    var arr = Array.from(document.querySelectorAll("ul")).map(function (item,index){
        console.log(item);
        return index
    })
    console.log(arr);
</script>
</html>

# - 获取html、head以及body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName</title>
</head>
<body>
    <script>
        // 获取html
        console.group("******************html*******************************");
        console.log(1,document.documentElement);
        console.log(2,document.getElementsByTagName("html")[0]);
        console.log(3,document.querySelector("html"));
        console.log(4,document.querySelectorAll("html")[0])
        console.groupEnd();

        // 获取head
        console.group("******************head*******************************");
        console.log(1,document.head);
        console.log(2,document.getElementsByTagName("head")[0]);
        console.log(3,document.querySelector("head"));
        console.log(4,document.querySelectorAll("head")[0])
        console.groupEnd();

        // 获取body
        console.group("*******************body***************************")
        console.log(document.body);
        console.log(document.getElementsByTagName("body")[0]);
        console.log(document.querySelector("body"));
        console.log(document.querySelectorAll("body")[0]);
        console.groupEnd();


    </script>
</body>

</html>

# - 获得表单数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form name="myForm">
        <p>姓名：<input name="userName" type="text"></p>
    </form>
</body>
<script>
    // 获取表单当中的name为userName的元素
    // 1- 获取
    // console.log(document.myForm.userName);

    // 2- 先将myForm赋值给一个变量，然后通过该变量调用
    // var myForm = document.myForm;
    // console.log(myForm.userName);
</script>
</html>

← 事件基础 →