JavaScript-9-操作DOM对象

最新推荐文章于 2024-10-09 00:58:21 发布

西西ANO

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量75

点赞数

分类专栏： # JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/baidu_38126306/article/details/113801205

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript -> 操作DOM对象

DOM：Document Object Model，文档对象模型
整个浏览器页面就是一个DOM树形结构
核心：
- 更新：更新DOM节点
- 遍历：得到DOM节点
- 删除：删除一个DOM节点
- 添加：新增一个DOM节点

1. 获得DOM节点

要操作一个DOM节点，就必须要先获得这个DOM节点
for example:

<div id="test-div">
    <div class="c-red">
        <p id="test-p">JavaScript</p>
        <p>Java</p>
    </div>
    <div class="c-red c-green">
        <p>Python</p>
        <p>Ruby</p>
        <p>Swift</p>
    </div>
    <div class="c-green">
        <p>Scheme</p>
        <p>Haskell</p>
    </div>
</div>

// 选择<p>JavaScript</p>:
var js = document.getElementById('test-p');

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementById('test-div').firstElementChild.nextElementSibling.getElementsByTagName('p');


// 选择<p>Haskell</p>:
var haskell = document.getElementById('test-div').lastElementChild.lastElementChild;

2. 更新DOM节点

修改节点的文本：
- 修改innerHTML属性：可以修改文本的值
- 修改innerText属性：可以解析HTML文本标签
修改节点的CSS：
- 通过style属性修改对应的CSS

<div id="test-div">
    <p id="test-js">javascript</p>
    <p>Java</p>
</div>

// 获取<p>javascript</p>节点:
var js = document.getElementById("test-js");

// 修改文本为JavaScript:
js.innerText = 'JavaScript';
// 修改CSS为: color: #ff0000, font-weight: bold
js.style.color='red';
js.style.fontWeight='bold'; //注意驼峰命名

3. 删除DOM节点

先获取节点的父节点，通过父节点来删除当前节点

<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

//删除与Web开发技术不相关的节点
var p = document.getElementById("test-list");
//删除Swift
p.removeChild(p.children[1]);
//删除ANSI C
p.removeChild(p.children[2]);
//删除DirectX
p.removeChild(p.children[3]);

4. 插入DOM节点

当获得了某个DOM节点，如果这个DOM节点是空的，那么直接使用innerHTML就可以修改内容，即相当于插入例如新的DOM节点；如果这个DOM节点不是空的，就不能使用innerHTML做，会覆盖。

两个方法插入新的节点：

appendChild：把一个子节点添加到父节点的最后一个子节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="c++">C++</p>
</div>

//把<p id="js">JavaScript</p>添加到<div id="list">的最后一项
<script>
    var
        js = document.getElementById('js');
        list = document.getElementById('list');
    list.appendChild(js);
</script>

在这里插入图片描述

动态从零创建一个新节点，实现插入：

<script>
    var
        list = document.getElementById('list');
        database = document.createElement('p');

    database.id = 'mysql';
    database.innerText='MySQL';
    list.appendChild(database);
</script>

//动态创建一个DOM节点然后添加到DOM树中，可以实现很多功能。如：动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，就动态地给文档添加了新的CSS
<script>
    var d = document.createElement('style');
    d.setAttribute('type','text/css');
    d.innerHTML = 'p {color:red}';
    document.getElementsByTagName('head')[0].appendChild(d);
</script>

insertBefore : 可以使用parentElement.insertBefore(newElement,referenceElement);，将newElement子节点插入到referenceElement之前

//把Hello插入到Python之前：
<script>
    var ref = document.getElementById('python');
    hello = document.createElement('p');
    hello.id = 'hello';
    hello.innerText = 'Hello';
    list.insertBefore(hello,ref);
</script>

练习：

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

按字符串顺序重新排序：

var list = document.getElementById('test-list');
var haskell = list.lastElementChild;
var ref = list.children[1];
list.insertBefore(haskell,ref);
var scheme = list.children[0];
list.appendChild(scheme);