欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

获取文本节点">HTML DOM-->获取文本节点

发布时间：2022/11/16 HTML 15 老码农
如意编程网 收集整理的这篇文章主要介绍了 获取文本节点">HTML DOM-->获取文本节点 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.元素节点.innerHTML

　　从对象的开始标签到结束标签的全部内容，不包括本身html标签

　　举例：获取button标签之间的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button id="in" onclick="func()">更新</button>
        <input  type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log(js.innerHTML)
        </script>
    </body>
</html>

　　输出：

HTML DOM-->获取文本节点

 

 2.元素节点.outerHTML

　　除了包含innerHTML的全部内容以外，还包含对象标签本身

　　举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button id="in" onclick="func()">更新</button>
        <input  type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log(js.outerHTML)
        </script>
    </body>
</html>

　　输出：

HTML DOM-->获取文本节点

 

 3.元素节点.innerText

　　从对象的开始标签到结束标签的全部文本内容

　　举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button id="in" onclick="func()">更新</button>
        <input  type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log(js.innerText)
        </script>
    </body>
</html>

　　输出：

HTML DOM-->获取文本节点

 

 4.修改

　　文本节点重新赋值

　　　　元素节点.innerHTML = '新值'

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button id="in" onclick="func()">更新</button>
        <input  type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            js.innerHTML='<H1>我是H标签</H1>'
            console.log(js)
        </script>
    </body>
</html>

　　输出：

HTML DOM-->获取文本节点

 

总结

以上是如意编程网为你收集整理的获取文本节点">HTML DOM-->获取文本节点的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。