• DOM常见属性及用法


    1:innerHTML、outerHTML、innerText、outerText

    innerHTML: 设置或获取位于对象起始和结束标签内的HTML。

    outerHTML: 设置或获取对象及其内容的HTML。

    innerText: 设置或获取位于对象起始和结束标签内的文本。

    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中取得某个元素的方法有:

    getElementById('节点id')、getElementsByTagName('标签名')、getElementByName('name属性值');

    3:添加、移除、创建元素、复制节点和查找节点以及判断节点类型:

    添加:appendChild(newNode)向节点最后添加一个子节点。也可以从一个元素向另一个元素移动元素。参见http://www.w3school.com.cn/jsref/

    移除:removeChild(node) 从元素中移除指定的子节点。

    创建:creatElement(tagName)创建元素节点。此方法返回一个Element对象。

    复制:node.cloneNode(deep)创建节点的拷贝,并返回该副本。deep为布尔值,默认为false,此时克隆节点的所有属性以及他们的值。设置为true时,克隆节点及其属性,以及所有后代。

  • 相关阅读:
    构建调试Linux内核网络代码的环境MenuOS系统
    关于iOS开发证书的一些总结(很有用)
    iOS原型模式
    iOS不用调用,running time自动执行方法
    关于网络设计服务结构的一些理解
    iOS 6.0之后支持一个页面横屏的方法
    iOS返回一个前面没有0,小数点后保留两位的数字字符串
    CoreData总结
    分享一个复用代码块的博客
    分享一个可以打开沙盒的软件
  • 原文地址:https://www.cnblogs.com/wymninja/p/5719429.html
Copyright © 2020-2023  润新知