DOM常見屬性及用法

時間 2019-12-09

標籤 dom 常見屬性用法欄目 HTML 简体版

原文原文鏈接

1：innerHTML、outerHTML、innerText、outerTextjavascript

innerHTML: 設置或獲取位於對象起始和結束標籤內的HTML。html

outerHTML: 設置或獲取對象及其內容的HTML。java

innerText: 設置或獲取位於對象起始和結束標籤內的文本。node

outerText: 設置（包括標籤）或獲取（不包括標籤）對象的文本。正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
    <ul id="test">
        <li><i>點擊1</i></li>
        <li>點擊2</li>
        <li>點擊3</li>
        <li>點擊4</li>
    </ul>
    <script type="text/javascript">
        var test = document.getElementById('test');
    var lis = test.getElementsByTagName('li');
    
    var handlers = function (nodes) {
        var i;
        for (i = 0; i < nodes.length; i += 1) {
            nodes[i].onclick = function(){
                console.log(this.innerHTML);
                console.log(this.outerHTML);
                console.log(this.innerText);
                console.log(this.outerText);
            }
        }
    };
    handlers(lis);
#results
//<i>點擊1</i>
//<li><i>點擊1</i></li>
//點擊1
//點擊1
    </script>
</body>
</html>

特別說明：
　　innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器，所以，儘量地去使用innerHTML，而少用innerText，若是要輸出不含HTML標籤的內容，可使用innerHTML取得包含HTML標籤的內容後，再用正則表達式去除HTML標籤。瀏覽器

2:Javascript中取得某個元素的方法有：app

getElementById('節點id')、getElementsByTagName('標籤名')、getElementByName('name屬性值')；this

3：添加、移除、建立元素、複製節點和查找節點以及判斷節點類型：spa

添加：appendChild(newNode)向節點最後添加一個子節點。也能夠從一個元素向另外一個元素移動元素。參見http://www.w3school.com.cn/jsref/code

移除：removeChild(node) 從元素中移除指定的子節點。

建立：creatElement(tagName)建立元素節點。此方法返回一個Element對象。

複製：node.cloneNode(deep)建立節點的拷貝，並返回該副本。deep爲布爾值，默認爲false，此時克隆節點的全部屬性以及他們的值。設置爲true時，克隆節點及其屬性，以及全部後代。

1. background的常見屬性及用法
2. ALAsset,ALAssetsLibrary,ALAssetsgroup常見屬性及用法
3. DOM常用的屬性
4. DOM的使用方法以及屬性
5. css常見屬性使用
6. CSS常見屬性
7. UIScrollView常見屬性
8. background常見屬性
9. UILabel常見屬性
10. background經常使用屬性及用法
更多相關文章...
• Spring Bean的配置及常用屬性 - Spring教程
• XML DOM - 屬性和方法 - XML DOM 教程
• 常用的分佈式事務解決方案
• Flink 數據傳輸及反壓詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。