HTML DOM-->獲取文本節點

本文轉載自查看原文 2020-04-17 22:18 783 javascript

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>

　　輸出：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 獲取元素節點的子節點 & 獲取文本節點 HTML DOM-->獲取標簽(元素)節點 HTML DOM-->獲取屬性節點 jQuery獲取文本節點之 text()/val()/html() 方法區別 dom節點獲取文本的方式 js中的DOM節點----文本節點 DOM中元素節點、屬性節點、文本節點的理解 jquery只獲取自身文本節點，不獲取子元素的深入理解DOM節點類型第二篇——文本節點Text 認識DOM的三大節點：元素節點（不包含文本），文本節點，屬性節點以及nodeName,nodeType,nodeValue的區別