前端基础（二十三）：DOM基础操作_parentnode.insertbefore-CSDN博客

本文详细介绍了如何使用原生JavaScript进行DOM操作，包括获取和设置属性、节点操作、元素创建及插入等基本技巧，并展示了如何利用这些技术来实现动态网页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JavaScript-DOM基础操作

getAttribute setAttribute

<div id="box" class="box" data-name="Lee">Lee</div>
<script>
    let dom = document.getElementById('box');
    let name = dom.getAttribute('data-name');
    console.log(name)   // Lee
    dom.setAttribute('data-age', 23)
    let age = dom.getAttribute('data-age');
    console.log(age)    // 23
    console.log(dom)    // <div id="box" class="box" data-name="Lee" data-age="23">Lee</div>
</script>

childNodes 空格换行也会被算作节点

<div id="box">
    <p id="a">Lee</p>
    <i>23</i>
    <span>男</span>
</div>
<script>
    let dom = document.getElementById('box');
    console.log(dom.childNodes);    // NodeList(7) [text, p#a, text, i, text, span, text]
</script>

attributes

<p id="box" data-name="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    // NamedNodeMap {0: id, 1: data-name, id: id, data-name: data-name, length: 2}
    console.log(box.attributes); 
</script>

nodeType 元素节点-1 属性节点-2 文本节点-3

<p id="box" data-name="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    let name = box.attributes['data-name']
    // 元素节点 1 <p id="box" data-name="Lee">Lee</p>
    console.log('元素节点', box.nodeType, box); 
    // 属性节点 2 data-name="Lee"
    console.log('属性节点', name.nodeType, name);
    // 文本节点 3 "Lee"
    console.log('文本节点', box.childNodes[0].nodeType, box.childNodes[0]);
</script>

nodeValue 修改节点的值

<p id="box" title="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    box.attributes['title'].nodeValue = 123;
    box.childNodes[0].nodeValue = 123;
    console.log(box); // <p id="box" title="123">123</p>
</script>

firstChild lastChild

<div id="box1">
    <p>Lee</p>
    <span>23</span>
</div>

<div id="box2"><p>Lee</p> <span>23</span></div>

<script>
    let box1 = document.getElementById('box1');
    console.log(box1.firstChild); // #text
    console.log(box1.lastChild); // #text
    
    let box2 = document.getElementById('box2');
    console.log(box2.firstChild); // <p>Lee</p>
    console.log(box2.lastChild); // <span>23</span>
</script>

createElement createTextNode appendChild

let p = document.createElement('p');
p.setAttribute('id', 'text');
let txt = document.createTextNode('Hello Lee!');
console.log(txt); // "Hello Lee!"
// err Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
// p.appendChild("Hello Lee!")
p.appendChild(txt)
document.body.appendChild(p);
console.log(p); // <p id="text">Hello Lee!</p>

parentNode insertBefore-在已有元素前插入一个新元素

<p id="name">
    <i id="age">24</i>
</p>
<script>
    let span1 = document.createElement('span');
    let prosper = document.createTextNode('Prosper');
    span1.appendChild(prosper);

    let span2 = document.createElement('span');
    let lee = document.createTextNode('Lee');
    span2.appendChild(lee);

    let name = document.getElementById('name');
    let age = document.getElementById('age');
    name.insertBefore(span1, age);
    age.parentNode.insertBefore(span2, age);

    console.log(age.parentNode); // <p id="name"><span>Prosper</span><span>Lee</span><i id="age">24</i></p>
</script>

在已有元素后插入一个新元素（新元素插入到目标元素的下一个兄弟元素之前）

已有元素.parentNode.insertBefore(新元素, 已有元素.nextSibling)

<body><span id="name">Prosper</span></body>
<script>
    let name = document.getElementById('name');
    let span = document.createElement('span');
    let lee = document.createTextNode('Lee');
    span.appendChild(lee);
    console.log(name.nextSibling); // #text
    name.parentNode.insertBefore(span, name.nextSibling);
</script>

accesskey

<a href="http://www.baidu.com/" accesskey="1">Alt + 1</a>

className

<span id="text">red</span>
<script>
    let text = document.getElementById('text');
    text.className = 'red';
    text.className += ' green';
    console.log(text); // <span id="text" class="red green">red</span>
</script>

Modernizr-检测浏览器支持情况

<head>
    <script src="http://modernizr.cn/downloads/modernizr-latest.js"></script>
</head>
<body>
    <script>
        console.log(Modernizr); // true or false object
    </script>
</body>

title

document.title = 'Lee'

table

<table border="1" width="500px">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>


<script>
    let tbody = document.getElementById('tbody');
    console.log(tbody);
    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode('Lee'));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode('24'));

    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode('Prosper'));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode('23'));

    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode('Tom'));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode('20'));
</script>

自定义数据属性

<div id="box" data-name="Lee"></div>
<script>
    console.log(document.getElementById('box').dataset.name);
</script>

滚动 scrollIntoView

<button onclick="scrollView()">滚动</button>
<div id="content" style="margin-top: 2000px;">
    文本。
</div>
<script>
    function scrollView() {
        var ele = document.getElementById("content");
        ele.scrollIntoView();
    }
</script>

contains

<div id="content"></div>
<script>
document.documentElement.contains(document.getElementById('content')) // true
document.documentElement.contains(document.getElementById('box')) // false
</script>