Dom的使用

document用于调用并操作标签




    
    Title



    
我是i1


    909
    abcdef








    
    Title



    
我是i1


    909
    abcdef
    123456

代码：定义几个标签

上图：
通过TagName获取的是数组，所以后面要根据下标获取标签。
可以使用innerText来获取标签中的文本内容并对其修改。

上图：for循环多个a标签，并将其文本内容修改为777。

Dom查找

直接查找


document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素



    
    Title



    

        

        

            c1
        

    


    

        

        

            c2
        

    


    

        

        

            c3

上图：获取指定id标签数据； 并且使用parentElement获取其父标签

上图：
prentElement.children 获取父标签的子标签
prentElement.previousElementSibling 获取父标签的上一个兄弟标签。

修改

上图：修改标签的className ='c1'，默认为空相当于新设定； 部位空，就将className修改成c2。

上图：将其className内容用列表的形式展现

上图：add 新增class名； remove 删除class名。

测试示例




    
    Title

    




    

              
        

            
                

                    主机名
                    端口
                

            
            
                

                    1.1.1.1
                    190
                

                

                    1.1.1.2
                    192
                

                

                    1.1.1.3
                    193

上2图：点击添加就会弹出弹框，点击取消就会隐藏。

分号

        function ReverseAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for(var i=0;i

代码：
上面的代码占用了多行，其实可以将多行的代码放在一行，这样就可以节省代码空间，使代码文件更小。
代码文件小在网络当中就会传输的快，同时在电脑上加载的也快。
这时为了区分代码，就需要使用分号将不同的代码区分开。

上图：图中标记部分，就是将多行代码放到一行，然后用分号来区分开来，这样就可以节省代码文件的大小空间了。

我们在编码的时候，可以将代码分为多行，这样逻辑上那看来更方便和整洁，但我们也要用分号来区分，因为最后代码在上线的时候会使用上线工具将多行代码自动放在一行，如果没有使用分号的话，将会导致代码异常。

左侧菜单示例




    
    Title

    




    


    


        

            
菜单1

            

                
内容1

                
内容1

                
内容1

            

        


        

            
菜单2

            

                
内容2

                
内容2

                
内容2

            

        


        

            
菜单3

            

                
内容3

                
内容3

                
内容3

            

        


        

            
菜单4

            

                
内容4

                
内容4

                
内容4

上图：点击哪个菜单，就会展开其内容。