javascript 获取元素

javascript querySelector 和 querySelectorAll

在 javascript 中,获取dom对象的节点的方式有很多,如:

document.getElementById()
document.getElementsByTagName()
document.getAnonymousElementByAttribute()
document.getElementsByName()
document.getElementsByClassName()

除了这些还有很多,这些大多都是只能传一个单一的选择器,如果想选择通过选择器来灵活,获取节点或节点列表就可以使用 querySelector 和 querySelectorAll

querySelector

获取选择器匹配到的节点列表中的第一个

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study javascript</title>
</head>
<body>
<button class="btns">测试1</button>
<button class="btns">测试2</button>
<button class="btns">测试3</button>

<script>
    var btns = document.querySelector('.btns');
    console.log(btns); // 只获取到了 <button class="btns">测试1</button>
</script>
</body>
</html>

querySelectorAll

获取选择器匹配到的节点列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study javascript</title>
</head>
<body>
<button class="btns">测试1</button>
<button class="btns">测试2</button>
<button class="btns">测试3</button>

<script>
    var btns = document.querySelectorAll('.btns');
    console.log(btns); // 所有的 button 标签
</script>
</body>
</html>

javascript获取DOM节点对象

获取父节点

parentNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#" id="link">百度一下,你就知道</a>
        </span>
    </div>
<script>
window.onload = function () {
    // 获取 a 标签
    var a = document.getElementsByTagName('a')[0];
    console.log(a);
    
    // 根据 a 标签获取 span
    var span = a.parentNode;
    console.log(span);
    
    // 根据 span 获取 div
    var div = span.parentNode;
    
    // 根据 a 获取 div
    var div = a.parentNode.parentNode;
}
</script>
</body>
</html>

获取兄弟节点

上一个: previousElementSibling 或者 previousSibling

下一个: nextElementSibling 或者 nextSibling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <ul>
        <li><a href="">001</a></li>
        <li><a href="">002</a></li>
        <li id="current"><a href="">003</a></li>
        <li><a href="">004</a></li>
        <li><a href="">005</a></li>
    </ul>
<script>
window.onload = function () {
    // 获取 "当前节点"
    var current = document.getElementById('current');
    console.log(current); // 003

    // 获取相对  "当前节点" 来说的上一个节点
    // current.nextElementSibling || current.nextSibling是IE兼容写法
    // 因为低版本IE只支持 nextSibling;
    var nextNode = current.nextElementSibling || current.nextSibling; 
    console.log(nextNode); // 只有 004,因为只获取 后面相邻 的 第一个 兄弟节点

    // 获取相对  "当前节点" 来说的下一个节点
    // current.previousElementSibling || current.previousSibling; 是IE兼容写法
    // 因为低版本IE只支持 previousSibling;
    var prevNode = current.previousElementSibling || current.previousSibling;
    console.log(prevNode); // 只有 002,因为只获取 前面相邻 的 第一个 兄弟节点
}
</script>
</body>
</html>

获取单个节点

  1. 第一个子节点: firstChild 或者 firstElementChild
  2. 最后一个子节点: lastChild 或者 lastElementChild
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <ul id="current">
        <li><a href="">001</a></li>
        <li><a href="">002</a></li>
        <li><a href="">003</a></li>
        <li><a href="">004</a></li>
        <li><a href="">005</a></li>
    </ul>
<script>
window.onload = function () {
    // 获取 "当前节点"
    var current = document.getElementById('current');
    console.log(current); // ul

    // 获取相对  "当前节点" 来说的第一个子节点
    // current.firstElementChild || current.firstChild 兼容写法,
    // 低版本ie只支持 firstChild
    var firstChildNode =  current.firstElementChild || current.firstChild;
    console.log(firstChildNode); // 001
    
    // 获取相对  "当前节点" 来说的最后一个子节点
    // current.lastElementChild || current.lastChild 兼容写法
    // 低版本ie只支持 lastChild
    var lastChildNode = current.lastElementChild || current.lastChild;
    console.log(lastChildNode); // 005
}
</script>
</body>
</html>

  1. 获取所有子节点 包括 html标签节点(元素节点), 属性节点 和 文本节点
// 判断节点类型
nodeType == 1; // html标签节点(元素节点)
nodeType == 2; // 属性节点
nodeType == 3; // 文本节点

​ 1. childeNodes 包括 html标签节点(元素节点), 属性节点 和 文本节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <ul id="current">
        <li><a href="">001</a></li>
        <li><a href="">002</a></li>
        <li><a href="">003</a></li>
        <li><a href="">004</a></li>
        <li><a href="">005</a></li>
    </ul>
<script>
window.onload = function () {
    // 获取 "当前节点"
    var current = document.getElementById('current');
    // console.log(current); // ul

    // 获取所有子节点,包括 html标签节点(元素节点), 属性节点 和 text节点
    var allChildNodes = current.childNodes;
    // console.log(allChildNodes); // 所有节点

    // 获取所有的 元素节点
    var htmlNodes = [];
    for(var i=0; i<allChildNodes.length; i++){
        if (allChildNodes[i].nodeType === 1) {
            htmlNodes.push(allChildNodes[i]);
        } else {
            continue;
        }
    }
    /*  或者 for...in   两种方式遍历都可以
    for (var key in allChildNodes) {
        if ( allChildNodes[key].nodeType === 1 ){
            htmlNodes[] = allChildNodes[key];
        }else {
            continue;
        }
    }
    */
    console.log(htmlNodes);
}
</script>
</body>
</html>

​ 2. children: 只获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <ul id="current">
        <li><a href="">001</a></li>
        <li><a href="">002</a></li>
        <!-- 注释节点 -->
        <li><a href="">003</a></li>
        <!-- 注释节点 -->
        <li><a href="">004</a></li>
        <li><a href="">005</a></li>
    </ul>
<script>
window.onload = function () {
    // 获取 "当前节点"
    var current = document.getElementById('current');
    // 获取相对于 "当前节点" 来说的所有子节点
    var allHtmlNode = current.children;
    // 注意: 低版本ie会获取注释节点
    console.log(allHtmlNode);
}
</script>
</body>
</html>
  1. 根据当前节点获取任意兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <ul>
        <li><a href="">001</a></li>
        <li><a href="">002</a></li>
        <li id="current"><a href="">003</a></li>
        <li><a href="">004</a></li>
        <li><a href="">005</a></li>
    </ul>
<script>
window.onload = function () {
    // 获取任意一个 兄弟节点
    
    // 1.获取 "当前节点"
    var current = document.getElementById('current');

    // 2.根据 "当前节点" 获取 父节点中的所有 子节点集合
    var allSiblings = current.parentNode.children;

    // 3.根据下标取任意一个"当前节点" 的 兄弟节点,下标从0开始
    console.log(allSiblings[1]); // 002

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

posted @ 2018-08-23 10:23  冷傲i  阅读(...)  评论(...编辑  收藏