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 数据传输及反压详解