咸鱼前端—js 获取元素

最新推荐文章于 2024-04-27 05:36:48 发布

咸鱼桨

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量539

点赞数

分类专栏： # javascript 前端文章标签： javascript 获取元素根据类名根据name

本文链接：https://blog.csdn.net/weixin_45020839/article/details/104750661

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

javascript

26 篇文章 0 订阅

订阅专栏

咸鱼前端—js 获取元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

根据id属性的值获取元素,返回来的是一个元素对象

var div = document.getElementById('main');     //ID的名字
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

案例：点击按钮弹出对话框

<input type="button" value="xianyu" id="btn1"/>
//根据id属性的值从整个文档中获取这个元素(标签)
//为该元素注册点击事件
document.getElementById("btn1").onclick=function () {
  alert("咸鱼王我当定了");
};
</script>

根据标签名获取元素

根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

var xia = document.getElementsByTagName('p');  //标签的名字
for (var i = 0; i < divs.length; i++) {
  var div = xia[i];
  console.log(xia);
}

案例:点击按钮,修改多个p标签的显示内容

<input type="button" value="666" id="btn"/>
<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
<script>
  document.getElementById("btn").onclick=function () {
    //根据标签名字获取标签
    var pDom= document.getElementsByTagName("p");    
    //循环遍历这个数组
    for(var i=0;i<pDom.length;i++){
      //每个p标签,设置文字
      pDom[i].innerText="555";
    }
  };

根据name获取元素

根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

var inputs = document.getElementsByName('xianyu');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

案例:点击按钮,修改多个p标签的显示内容

<input type="button" value="按钮"  id="btn"/>
<div>
    <p name="xianyu"></p>
    <p name="xianyu"></p>
    <p name="xianyu"></p>
    <p name="xianyu"></p>
    <p name="xianyu"></p>
</div>
<script>
    document.getElementById("btn").onclick=function () {
        //根据name获取
        var pDom= document.getElementsByName("xianyu");
        //循环遍历这个数组
        for(var i=0;i<pDom.length;i++){
            //每个p标签,设置文字
            pDom[i].innerText="666";
        }
    };
</script>

根据类名获取元素

根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

通过class获取，不兼容IE8及以下

根据选择器获取元素

根据选择器获取元素,返回来的是一个元素对象

var text = document.querySelector('#text');
console.log(text);

根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

根据节点获取元素

var test = document.getElementById("test");
var parent = test.parentNode; // 父节点
var chils = test.childNodes; // 全部子节点
var first = test.firstChild; // 第一个子节点
var last = test.lastChile; // 最后一个子节点　
var previous = test.previousSibling; // 上一个兄弟节点
var next = test.nextSibling; // 下一个兄弟节点

案例：通过节点操作隔行变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        ul {
            padding: 0;
        }

        li {

            list-style: none;
        }

    </style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

<script>
    var my$=function(id){
        return document.getElementById(id);
    }
    //隔行变色--li
    my$("btn").onclick = function () {
        var count=0;//记录有多少个li
        //获取ul中所有的子节点
        var nodes = my$("uu").childNodes;
        for (var i = 0; i < nodes.length; i++) {
            //判断这个节点是不是li标签
            if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
                nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
                count++;//8个

            }
        }
    };
</script>
</body>
</html>