JavaScript-DOM-文本节点

十二啊

已于 2022-04-26 22:59:22 修改

阅读量1.6k

点赞数 2

分类专栏：十二的 Javascript 之路文章标签： javascript 前端

于 2022-04-26 22:57:23 首次发布

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124434256

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-文本节点

文本节点由Text类型表示，具有以下特征：

nodeType值为3
nodeName值为"#text"
nodeValue值为节点所包含的文本
parentNode是一个Element（元素）类型节点
不包含子节点

第一步创建文本节点

之前在DOM增、删、改一篇中已经详细介绍了文本节点搭配元素节点生成相应的显示内容。再来回顾一下如何创建文本节点？使用document对象的createTextNode()方法就可以啦。

document.createTextNode(data)

第二步查看、替换文本

相关属性表如下：

属性	描述
innerHTML	返回调用元素包含的所有子节点对应的HTML标记字符串，可以直接赋值替换调用元素所有子节点
outerHTML	返回调用元素及所有子节点对应的HTML标记字符串，可以直接赋值替换调用元素及所有子节点
innerText	返回指定元素文本内容，可以赋值修改，Firefox不支持
outerText	与innerText功能相似，但可以覆盖原有元素
textContent	与innerText功能类似

除了以上属性外，再介绍两个插入文本和元素的方法：insertAdjacentText()方法包含两个参数：第一个表示插入位置，第二个是要插入的文本。insertAdjacentHTML()方法包含两个参数：第一个表示插入位置，第二个是要插入的HTML字符串。两个方法的插入位置必须是下列值之一：

“beforebegin”：在当前元素之前插入一个紧邻的同辈元素。
“afterend”：在当前元素之后插入一个紧邻的同辈元素。
“afterbegin”：在当前元素之下插入一个新的子元素，或在第一个子元素之前再插入新的子元素。
“beforeend”：在当前元素之下插入一个新的子元素，或在最后一个子元素之后再插入新的子元素。

第三步操作文本节点

用下列方法可以操作文本节点中的文本。

appendData(string):将字符串string追加到文本节点的尾部。
deleteDatal(tart,length):从start下标位置开始删除length个字符。
insertData(start,string):在start下标位置插入字符串string。
replaceData(start,length,string):使用字符串string替换从start下标位置开始length 个字符。
splitText(offset):在offset下标位置把一个Text节点分割成两个节点。
substringData(start,length):从start 下标位置开始提取length个字符。

亲自试一试

既要读万卷书，也要行万里路。毕竟实践才是检验真理的唯一标准！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-文本节点操作示例</title>
</head>
<script>
    window.onload = function () {
        let ul_one = document.getElementsByTagName('ul')[0];
        let li_four = document.createElement('li');
        // 创建文本节点
        let li_text_four = document.createTextNode('恐惊天上人');
        li_four.appendChild(li_text_four);
        ul_one.appendChild(li_four);
        console.log('打印添加子节点的ul：', ul_one.innerHTML);

        let ul_two = document.getElementsByTagName('ul')[1];
        let lis = ul_two.getElementsByTagName('li');
        lis[0].onclick = function () {
            // innerHTML替换文本内容
            this.innerHTML = '<h3>窗前明月光</h3>';
        }
        lis[1].onclick = function () {
            // outerHTML覆盖元素标签
            this.outerHTML = '<h3>疑是地上霜</h3>';
        }
        lis[2].onclick = function () {
            // innerText在指定元素中插入文本
            this.innerText = '举头望明月';
        }
        lis[3].onclick = function () {
            // outerText覆盖原有元素
            this.outerText = '低头思故乡';
            console.log(ul_two.innerHTML);

        }
        // insertAdjacentText()方法包含两个参数：第一个表示插入位置，第二个是要插入的文本
        ul_one.insertAdjacentText('afterbegin', '夜宿山寺')
        // insertAdjacentHTML()方法包含两个参数：第一个表示插入位置，第二个是要插入的HTML字符串
        ul_two.insertAdjacentHTML('afterbegin', '<li>静夜思</li>')

        let li_one = document.getElementsByTagName('li')[0].firstChild;
        // 访问文本节点包含的文本，可以通过nodeValue和data属性
        console.log(li_one.nodeValue, li_one.data);

        // 操作文本节点
        // appendData(String)
        li_one.appendData('，在文本节点末尾追加');
        // deleteData(start, length);
        // insertData(start, String);
        // replaceData(start, length, String);
        // splitText(offset);
        // substringData(start, length);

    }
</script>
<style>
    ul {
        list-style: none;
    }
</style>

<body>
    <div>
        <ul>
            <li>危楼高百尺</li>
            <li>手可摘星辰</li>
            <li>不敢高声语</li>
        </ul>
        <hr>
        <ul>
            <li>静夜思第一句</li>
            <li>静夜思第二句</li>
            <li>静夜思第三句</li>
            <li>静夜思第四句</li>
        </ul>
    </div>
</body>

</html>