Javascript Dom元素获取和添加

OrochiZ-

1.Dom元素的获取

api 说明
document.getElementById() 通过id获取一个Dom元素
document.getElementsByClassName() 通过class名字获取一个或多个Dom元素（伪数组）
document.getElementsByTagName() 通过标签名字获取一个或多个Dom元素（伪数组）
document.querySelector() 获取指定 CSS 选择器的一个元素(ES6)
document.querySelectorAll() 获取指定 CSS 选择器的多个元素（伪数组）(ES6)

ES6选择器与其他选中器的区别：
document.getElementsByTagName()和document.getElementsByClassName()获取到的都是动态列表
document.querySelectorAll()获取到的是静态列表,Dom结构发生变化要重新获取，不然会出问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul>
            <li class="test">1</li>
            <li class="test">2</li>
            <li class="test">3</li>
            <li class="test">4</li>
        </ul>
    </body>
</html>
<script>
    var lis = document.getElementsByTagName(\'li\')
    var liByQuery = document.querySelectorAll(\'li\')
    console.log(lis.length)  // 4
    console.log(liByQuery.length)  // 4

    // 动态添加li标签
    document.querySelector(\'ul\').innerHTML += "<li class=\'test\'>5</li>"
    console.log(lis.length) // 5 
    console.log(liByQuery.length) // 4 
</script>

document.getElementsByTagName()和document.getElementsByClassName()获取到的是 HTMLCollection，不能使用foreach()遍历
document.querySelectorAll()获取到的NodeList，可以使用foreach()遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=2.0">
        <title>Test</title>
    </head>
    <body>
        <ul>
            <li class="test">1</li>
            <li class="test">2</li>
            <li class="test">3</li>
            <li class="test">4</li>
        </ul>
    </body>
</html>
<script>
    var li = document.getElementsByTagName(\'li\')
    var li2 = document.getElementsByClassName(\'test\')
    var li3 = document.querySelectorAll(\'li\')
    var li4 = document.querySelector(\'ul\').children
    console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
    console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
    console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test]
    console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
</script>

2.Dom元素节点类型

Dom节点类型分3类：元素节点,属性节点,文本节点
每种节点都有3种属性 nodeName,nodeType,nodeValue

<body>
    <div id="box" title="我在哪">我是谁</div>
</body>
<script>
    // 获取元素节点
    var box = document.querySelector(\'#box\')
    // 元素节点的属性
    console.log(box.nodeName);//DIV
    console.log(box.nodeType); //1
    console.log(box.nodeValue); //一律为null
    
    // 根据属性名获取单个属性节点
    var attrTitle = box.getAttributeNode("title")
    // 属性节点的属性
    console.log(attrTitle.nodeName);//title
    console.log(attrTitle.nodeType); //2
    console.log(attrTitle.nodeValue); //"我在哪"
    //获取所有的属性节点
    var atttibues = box.attributes
    //获取特定的节点 下标和属性名都可以获取
    var idNode = atttibues.id //atttibues[0] id="box"
    console.log(idNode.nodeName,idNode.nodeType,idNode.nodeValue)//id 2 box

    // 获取box的文本节点（没有专门的方法用来获取文本节点，但是这个div的第一个子节点就是文本节点）
    var textNode = box.childNodes[0];
    // 文本节点的属性
    console.log(textNode.nodeName);//#text
    console.log(textNode.nodeType); //3
    console.log(textNode.nodeValue); //"我是谁"
</script>

3.获取Dom元素的子元素，父元素，兄弟元素

属性 说明 调用者
children 获取当前Dom元素的子元素（只包含元素节点） 当前Dom元素
childNodes 获取当前Dom元素的子节点（包含元素节点和文本节点，不包含属性节点） 当前Dom元素
attributes 获取当前Dom元素所有属性节点 当前Dom元素
firstChild 等价于childNodes[0] 当前Dom元素
lastChild 相当于childNodes的最后一个元素 当前Dom元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul id="myul" class="item">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>
<script>
    // 获取ul元素
    var ul = document.querySelector(\'ul\')
    // 获取ul子元素
    var ul_children = ul.children //只包含元素节点
    // 遍历子元素
    for(var i=0;i<ul_children.length;i++){
        console.log(ul_children[i].innerHTML)
    } 
    console.log(ul.childNodes) //包含元素节点和文本节点

   console.log(ul.attributes) //具体的属性节点通过下标和属性名都可访问
</script>


属性 说明 调用者 备注
parentElement 获取当前Dom元素的父元素 当前Dom元素 两者作用一致，因为目标既是节点，也是元素
parentNode 获取当前Dom元素的父节点 当前Dom元素 两者作用一致，因为目标既是节点，也是元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>
<script>
    // 获取ul元素
    var ul = document.querySelector(\'ul\')
    // 获取父元素(ul的父级就是body)
    var parent = ul.parentElement
    var parentNode = ul.parentNode

    console.log(parent.nodeName) // BODY
    console.log(parentNode.nodeName) // BODY

    parent.style.color = \'red\' //通过父元素改变字体大小
    parentNode.style.fontStyle = \'italic\' //通过父节点设置文字斜体

</script>

属性 说明 调用者
previousElementSibling 上一个兄弟元素（元素节点） 当前Dom元素
nextElementSibling 下一个兄弟元素（元素节点） 当前Dom元素
previousSibling 上一个兄弟节点（元素节点和文本节点） 当前Dom元素
nextSibling 下一个兄弟节点（元素节点和文本节点） 当前Dom元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul>
            <li>1</li>
            <li id="test">2</li>
            <li>3</li>
        </ul>
    </body>
</html>
<script>
    // 获取id为test的li元素
    var li = document.querySelector(\'#test\')
    // 获取兄弟元素
    var preBrother = li.previousElementSibling
    var nextBrother = li.nextElementSibling

    console.log(preBrother.innerHTML) // 1
    console.log(nextBrother.innerHTML) // 3

    console.log(li.previousSibling)
    console.log(li.nextSibling)
</script>

4.DOM元素的添加与移除

方法名 说明 调用者
appendChild(childElement) 将传入的元素作为子元素添加到末尾 当前Dom元素
insertBefore(addElement,siblingElement) 将目标元素作为子元素添加到当前元素中，位置可以自由选择 当前Dom元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul>
            <li>1</li>
            <li id="test">2</li>
            <li>3</li>
        </ul>
    </body>
</html>
<script>
    // 获取ul元素
    var ul = document.querySelector(\'ul\')
    // 创建li元素
    var liNode = document.createElement(\'li\')
    liNode.innerHTML = "4"
    // 将创建的li元素添加到ul中(最后面)
    ul.appendChild(liNode)

    // 再创建li元素
    var liNode2 = document.createElement(\'li\')
    liNode2.innerHTML = "life"

    var li_test = document.querySelector(\'#test\')
    // 将创建的li元素添加到ul中(li_test的前面)
    ul.insertBefore(liNode2,li_test)
</script>

运行结果

<ul>
    <li>1</li>
    <li>life</li>
    <li id="test">2</li>
    <li>3</li>
    <li>4</li>
</ul>
方法名 说明 调用者
removeChild(childElement) 删除目标子元素 当前Dom元素
replaceChild(替换的元素, 被替换的元素) 替换目标子元素 当前Dom元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
    </style>
    <body>
        <ul>
            <li>1</li>
            <li id="test">2</li>
            <li id="replace">3</li>
        </ul>
    </body>
</html>
<script>
    // 获取ul元素
    var ul = document.querySelector(\'ul\')

    // 获取要删除的li元素
    var li_test = document.querySelector(\'#test\')
    // 删除子元素
    ul.removeChild(li_test)

    // 获取要替换的li元素
    var li_replace = document.querySelector(\'#replace\')
    // 创建要替换的元素
    var newLI = document.createElement(\'li\')
    newLI.innerHTML = "replace li tag"
    // 替换元素
    ul.replaceChild(newLI,li_replace)
</script>

运行结果：

<ul>
    <li>1</li>            
    <li>replace li tag</li>
</ul>

5.复制dom元素 cloneNode()

api 说明
cloneNode(true) 深复制，包括元素本身和他的后代元素
cloneNode(false) 默认，只复制元素本身和他的属性，而不包含子节点（标签和文本）

坑爹的W3C不解释，查文档只推荐MDN

<p id="pp">hello world2</p>

var p = document.querySelector(\'#pp\');
console.log(p.cloneNode(false));
//<p id="pp"></p>
console.log(p.cloneNode(true));
//<p id="pp">hello world2</p>

分类：

技术点：

相关文章：

  • 2021-11-19
  • 2021-11-19
  • 2021-11-19
  • 2021-11-28
  • 2021-11-01
  • 2019-06-19
  • 2021-11-19
  • 2021-11-19
猜你喜欢
  • 2021-11-28
  • 2021-06-11
  • 2021-11-30
  • 2021-04-12
  • 2021-11-04
  • 2021-10-16
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode