zoukankan      html  css  js  c++  java
  • DOM 关于dom的

    获取元素:
    
    getElementById()   返回带有指定ID的元素
    
    getElementsByTagName(); 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
    
    getElementsByClassName(); 返回包含带有指定类名的所有元素的节点列表。
    
    例如:
       
    <p id="box">id为box的p标签</p>
    <p class="box">class为box的p标签内容1</p>
    <p class="box">class为box的p标签内容2</p>
    <p class="box">class为box的p标签内容3</p>
    
    var obj=document.getElementById('box').innerText;
    alert(obj); //弹出的内容:id为box的p标签
    var objclass=document.getElementsByClassName('box')[1].innerText;
    alert(objclass); //弹出的内容:class为box的p标签内容2
    var objtag=document.getElementsByTagName('p');
    alert(objtag.length); //弹出的内容:所有
    
    
    方法:
    appendChild() 把新的子节点添加到指定节点。 

    例子:

    var createNode=document.createElement("div");
    var createTextNode=document.createTextNode("文本内容");
    createNode.appendChild(createTextNode);
    //document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);
    // document.body指向的是<body>元素;document.documentElement则指向<html>元素
    removeChild() 删除子节点。

    <div id="father">
    <div id="child">A child</div>
    </div>

    var childnode=document.getElementById("child");
    document.getElementById("father").removeChild(childnode);

    insertBefore()  插入新节点;

    <body>
    <span id="lovespan">熊掌我所欲也!
    </span>
    </body>
    <script
    type="text/javascript">
    var lovespan=document.getElementById("lovespan"); //获取id
    var newspan=document.createElement("span");
    var newspanref=document.body.insertBefore(newspan, lovespan);//在body里 lovespan span前面添加newspan
    newspanref.innerHTML="添加前面";
    </script>

     cloneNode     返回当前节点的拷贝
    例子:


    <ul id="box">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    </ul>

    <script type="text/javascript">
    var objbox=document.getElementById('box');
    var objclone=objbox.cloneNode(true);
    document.body.insertBefore(objclone,objbox);
    </script>

    createAttribute     创建新的属性


  • 相关阅读:
    document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义
    Go -10 Go Web 简单实现
    Go -09 Go 函数和方法区别
    Go -08 Go win 环境搭建
    Go-07 Go 规范代码风格
    Go-06 Go 语言注释(comment)
    Go-05 Go 转义字符
    Go-04 Go 语法要求和注意事项
    Go-03 Go 快速入门
    Go-02 搭建 Go 开发环境(mac系统)
  • 原文地址:https://www.cnblogs.com/jinsuo/p/6763719.html
Copyright © 2011-2022 走看看