zoukankan      html  css  js  c++  java
  • 关于HTML的Element

    今天搞HTML的时候,发现了一些操作element的方法。先引用一篇。

    1.document.getElementById(id);  
    2.document.getElementByTagName(tagName);

    3.element.childNodes 
       --element.firstChild=element.childNodes[0]; 
      --element.lastChild=element.childNodes[element.childNonts.length-1]; 
    4.element.parentNode 

    5.element.nextSibling; //引用下一个兄弟结点 
    element.previousSibling; //引用上一个兄弟结点

     
    6.nodeName属性获得结点名称 
      --对于元素结点返回的是标记名称,如:<a herf><a>返回的是"a" 
      --对于属性结点返回的是属性名称,如:class="test" 返回的是test 
      --对于文本结点返回的是文本的内容 
    7.nodeType返回结点的类型 
      --元素结点返回1 
      --属性结点返回2 
      --文本结点返回3 
    8.nodeValue返回结点的值 
      --元素结点返回null 
      --属性结点返回undefined 
      --文本结点返回文本内容


    9.hasChildNodes()

    10.tagName  

     
    11.每个属性结点都是元素结点的一个属性,可以通过(元素结点.属性名称)访问 
    12 setAttribute()   

      --elementNode.setAttribute(attributeName,attributeValue); 

    13.使用getAttribute()方法

      --elementNode.getAttribute(attributeName); 
     
    14.innerHTML和innerText属性

    <script language"javaScript" type="text/javascript"> 
    function cleanWhitespace(element) 

    for(var i=0; i<element.childNotes.length; i++) 

    var node = element.childNodes[i]; 
    if(node.nodeType == 3 && !/S/.test(node.nodeValue)) 

    node.parentNode.removeChild(node); 



    </script> 


    15.document.createElement()方法创建元素结点 
      --如:document.createElement("Span"); 
    16.document.createTextNode()方法创建文本结点 
      --如:document.createTextNode(" ");

    17.使用appendChild()方法添加结点 
    18.使用insertBefore()方法插入子节点 
     
    19.使用replaceChild方法取代子结点 
     
    20.使用cloneNode方法复制结点 
      --node.cloneNode(includeChildren); 
      --includeChildren为bool,表示是否复制其子结点 
    21.使用removeChild方法删除子结点 


    22.添加行和单元格 
    var _table=document.createElement("table"); //创建表 
    table.insertRow(i); //在table的第i行插入行 
    row.insertCell(i); //在row的第i个位置插入单元格 
    23.引用单元格对象 
    -  -table.rows[i].cells[i]; 
    24.删除行和单元格 
      --table.deleteRow(index); 
      --row.deleteCell(index); 
    25.交换两行获得两个单元格的位置 
      node1.swapNode(node2); 

    然后再讲自己的验证,搬来代码如下,以下内容运行于IE9,Chrome均可:

    <script type="text/javascript">
        function displayKeisaiMeisai(img){
            var tr = img.parentNode.parentNode;
            var tr1 = tr.getElementsByTagName("TD")[1].getElementsByTagName("TABLE")[0].getElementsByTagName("TR")[1];
            if(tr1.style.display=="none"){
                tr1.style.display="block";
                img.src = "./img/triangle_displayNone.png";
            } else {
                tr1.style.display="none";
                img.src = "./img/triangle_dispaly.png";
            }
        }
        
        function addRow2() {
            var _tab = document.getElementById("keisai_b");
            var newnode = _tab.getElementsByTagName("TR")[0].cloneNode(true);
            _tab.getElementsByTagName("TBODY")[0].appendChild(newnode);
        }
    
    </script>
    
    <input type="button" value="Test追加挿入"
                    style="height: 35px;  150px; margin-top: 3px; margin-left: 0px;"
                    id="btnAdd"
                    onClick="addRow2();" />
    <table id = "keisai_b">
        <tr>
            <td>
                <table name="keisai_b_node">
                    <tr>
                        <td style="vertical-align:top;">
                            <img id="keisai_b_1" style="margin-top: 5px;" src="./img/triangle_dispaly.png" onclick="displayKeisaiMeisai(this);"/>
                        </td>
                        <td>
                            <table style="background-color: white;">
                                <tr>
                                    <td style="border:solid 1px #FF6600; 700px;"><div>決裁</div></td>
                                </tr>
                                <tr id="keisai_b_1_m" style="display:none;">
                                    <td>
                                    <table class="mazarine" style="background-color: #FF6600; border: solid 2px #FF6600;  ">
                                        <tr>
                                        <th style="border-color: white; background-color: #FF6600;">
                                            <div style=" 160px;">決裁</div></th>
                                        <td style="text-align: left; border-color: #FF6600; background-color: white;">
                                            <div style=" 120px;"></div></td>
                                        <th style="border-color: #FF6600; background-color: #FF6600;">
                                            <div style=" 80px;">決済日</div></th>
                                        <td style=" 100px; text-align: left; border-color: #FF6600; background-color: white;">
                                            <div style=" 120px;"></div></td>
                                        <th style=" 80px; border-color: #FF6600; background-color: #FF6600;">
                                            <div style=" 80px;">決裁者</div></th>
                                        <td style=" 100px; text-align: left; border-color: #FF6600; background-color: white;">
                                            <div style=" 120px;"></div></td>
                                        </tr>
                                        <tr>
                                            <th style="border-color: white; background-color: #FF6600;">
                                                <div style=" 160px;">連絡事項</div></th>
                                            <td colspan="5" style="text-align: left; border-color: #FF6600; background-color: white;"></td>
                                        </tr>
                                    </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  • 相关阅读:
    三元表达式 列表和字典推导式 函数对象 名称空间 作用域 global和nonlocal 函数装饰器 枚举对象
    函数参数 打散机制 字符串比较 返回值
    函数简介
    三种字符串的介绍 文件的读写
    字符编码
    数据类型及其常用方法 数据类型转换 可变与不可变 值拷贝与深浅拷贝
    流程控制 while和for循环
    变量命名规范 常量 输入和输出 注释 数据类型 运算符 逻辑运算符
    语言分类 编译型和解释型语言分析 环境变量 代码执行的方式 pip介绍 变量
    Python django tests
  • 原文地址:https://www.cnblogs.com/niutouzdq/p/3979542.html
Copyright © 2011-2022 走看看