JavaScript基础学习（五）

一、 在末尾添加节点
        -1.获取ul标签
        -2.创建li标签
            document.createElement("标签名称")方法;
        -3.创建文本
            document.creatTextNode("文本内容");
        -4.把文本添加到li下面
            使用appendChild方法
        -5.把li添加到ul末尾

            使用appendChild方法

    
            

            
• 11111

            
• 22222

            
• 33333

            
• 44444

    

    
 
   

二、元素对象（element对象）
        **要操作element对象，首先必须获取到element,
            -使用document里面相应的方法获取

        **方法
            ***获取属性里面的值
                    getAttribute("属性名称");
                    
                //先获取input标签
                var input1 = document.getElementById("inputid");
                //document.write(input1.value);
                document.write(input1.getAttribute("value"));

            **设置属性值
            input1.setAttribute("value","ssss");

            **删除属性(不能删除value)
            document.write(input1.getAttribute("name"));//name1
            document.write(input1.removeAttribute("name"));
            document.write(input1.getAttribute("name"));//

            ***想要获取标签下面的子标签
                **使用属性childNodes，但是这个属性兼容性很差
                **获得标签下面子标签的唯一有效办法，使用getElementsByTagName()方法
            

                    
• aaaa
• 
                      
• aaaa
• 
                      
• cccc

            

            

三、Node对象属性一
        *nodeName
        *nodeType  //返回以数字值返回指定节点的节点类型
        *nodeValue

        *使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

        
        
        哈哈哈哈哈
 
   

四、Node对象的属性二
        *父节点
            -parentNode
            //得到li1
            var li1 = document.getElementById("li1");
            //得到ul
            var ul1 = li1.parentNode;
            document.write(ul1.id);
        *子节点
            -childNodes:得到所有子节点，但是兼容性很差
            -firstChild:获得第一个子节点
            -lastChild:获取最后一个子节点
            //得到ul
            var ul1 = document.getElementById("ulid");
            //得到第一个子节点
            var li1 = ul1.firstChild;
            document.write(li1.id);//li1
            //得到最后一个子节点
            var li3 = ul1.lastChild;
            document.write(li3.id);//li3

        *同辈节点
            //得到li3的上一个兄弟节点
            var li2 = li3.previousSibling;
            document.write(li2.id);
            //得到li2的下一个兄弟节点

            document.write(li2.nextSibling.id);
            
五、操作dom树
        **appendChild方法
            -添加子节点到末尾
            -特点：类似于剪切粘贴的效果
            
        ** insertBefore(newNode,oldNode)方法
            -在某个节点之前插入一个新的节点
            -两个参数
            -插入一个节点，节点不存在，创建
                    1.创建标签
                    2.创建文本
                    3.把文本添加到标签下面
                    4.获取某节点
                    5.获取父节点
                    6.执行插入操作，插入某节点之前
        **removeChild方法：通过父节点删除
        **replaceChild(newNode,oldNode)方法：替换节点
            -通过父节点进行替换
            -两个参数
            -替换一个节点，节点不存在，创建
                    1.创建标签
                    2.创建文本
                    3.把文本添加到标签下面
                    4.获取原节点
                    5.获取父节点
                    6.执行替换操作

        
 
  
 

 
    
        

                

                    
tom
                    
mary
                    
jack
                
        
        

            

        
        
        
        
        
 
   

            ***cloneNode复制节点
            //把ul列表复制到另一个div里面
            /*
                1.获取到ul
                2.执行复制方法，cloneNode（true）方法复制  true
                var ulcopy = ul11.cloneNode(true)
                3.把复制之后的内容放到div里面去
                        **获取到div
                        var div12 = document.getElementById("div12");
                        **appendChild方法
                        div12.appenfChild(ulcopy);

            */

            ***操作dom总结
                    -获取节点使用方法（3种）
                    -插入节点的方法（2种）
                    -删除节点方法
                    -替换节点方法

六、innerHTML属性
            *这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

            第一个作用：获取文本内容
            哈哈哈哈哈哈
            //获取span标签
            var span1 = document.getElementById("sid");
            document.write("

---

");
            document.write(span1.innerHTML);//哈哈哈哈哈哈
            第二个作用：向标签里面设置内容(可以是html代码)
            //向div里面设置内容

AAAAA

            //获取到div
            var div11 = document.getElementById("div11");
            //设置内容
            div11.innerHTML = "

AAAAA

";
            
            ***练习：向div里面添加一个表格
            var tab="

aaaaa	nnn
bbbb	ccc

";
            //var tab = "";
            //tab += "";
            //相当于var tab ="";
            div11.innerHTML=tab;