zoukankan      html  css  js  c++  java
  • 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>

      输出:

     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>

      输出:

     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>

      输出:

     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>

      输出:

  • 相关阅读:
    Linux基础——硬盘分区、格式化及文件系统的管理
    Linux基础——系统监控
    Centos7安装并配置mysql5.6完美教程
    lr常用函数
    Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
    cmd批处理常用符号详解
    Java 和 JSP 实现网站访问量统计 (刷新过滤)
    JAVA 导出 Excel, 将Excel下载到本地
    JAVA 导出 Excel, JS 导出 Excel
    windows server服务器上部署java+tomcat网站域名配置
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12722873.html
Copyright © 2011-2022 走看看