DOM操作-03-innerHTML、innerText

最新推荐文章于 2022-11-05 09:21:36 发布

金子塔上的大熊猫

最新推荐文章于 2022-11-05 09:21:36 发布

阅读量291

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41874591/article/details/116034605

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

innerHTML和innerText
- 内容
- 修改
nodeType属性
- - 测试：

innerHTML和innerText

内容

innerHTML：节点内部的内容（包括html标签）
innerText：节点内部的内容（不包括html标签）

<body>
<div id="content" class="first01" title="title1" aa="aaaa">
    多么忧郁的花多愁善感的人啊!
    <p>你说你最爱丁香花,因为你的名字就是她</p>
</div>

<script type="text/javascript">
    let content=document.getElementById("content");
    console.log(content.innerText);
    console.log(content.innerHTML);
</script>
</body>

在这里插入图片描述

修改

innerHTML：若里面包含标签，就会添加标签。
innerText：只修改文本内容，若文本包含标签，这把标签当成字符串输出。

nodeType属性

-nodeType == 1 表示的是元素节点（标签）

-nodeType == 2 表示是属性节点。

-nodeType == 3 是文本节点。

测试：

<body>
<div id="div1">
    good!
</div>
<script type="text/javascript">
    let div1=document.getElementById("div1")
    let attribute = div1.getAttributeNode("id");
    let firstChild = div1.firstChild;

    console.log(div1);
    console.log("------------------------");
    console.log(attribute);
    console.log("------------------------");
    console.log(firstChild);
</script>
</body>

在这里插入图片描述
可以确定每个节点类型
获取：nodeType、nodeName、nodeValue

<body>
<div id="div1">
    good!
</div>
<script type="text/javascript">
    let div1=document.getElementById("div1")
    let attribute = div1.getAttributeNode("id");
    let firstChild = div1.firstChild;
    
    console.log(div1.nodeType);
    console.log(attribute.nodeType);
    console.log(firstChild.nodeType);
    console.log("---------------------");
    console.log(div1.nodeName);
    console.log(attribute.nodeName);
    console.log(firstChild.nodeName);
    console.log("---------------------");
    console.log(div1.nodeValue);
    console.log(attribute.nodeValue);
    console.log(firstChild.nodeValue);
</script>
</body>