2019-05-20原生js操作

1. 获取节点

1.1 直接获取
a) 通过id值来获取节点: document.getElementById(id属性值) - 返回是标签对应的节点对象
补充: HTML标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本

1. 获取节点
//           1.1 直接获取
//           a) 通过id值来获取节点: document.getElementById(id属性值)  - 返回是标签对应的节点对象
//          补充: HTML标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
//                innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
            pNode = document.getElementById('p1')
            console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)
            
            divNode = document.getElementById('div1')
            console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
            console.log('text:', divNode.innerText)
            
//          divNode.innerText = "我是超链接"
//          divNode.innerHTML = "我是超链接"

            divNode.innerHTML = "
我是段落3
"
            
            //b) 通过class值获取节点: document.getElementsByClassName(class属性值) - 返回一个数组
            c1NodeArray = document.getElementsByClassName('c1')
            console.log(c1NodeArray)
            //根据下标获取元素
            imgNode = c1NodeArray[1]
            imgNode.title = '路飞'
            
            //c) 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组 
            pNodes = document.getElementsByTagName('p')
            console.log(pNodes)
             
            //d)通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
            //document.getElementsByName()
            
            //1.2获取父节点
            // 节点.parentElement  - 获取指定节点对应的父节点
            bodyNode = pNode.parentElement
            console.log(bodyNode)
            
            //1.3获取子节点
            //a)获取所有子节点: 节点.children  - 获取自定节点所有的子节点(不会获取孙子节点)
            children1 = bodyNode.children
            console.log(children1)
            
            //b)获取第一个子节点: 节点.firstElementChild
             firstNode = bodyNode.firstElementChild
             console.log(firstNode)
             
             //c)获取最后一个子节点: 节点.lastElementChild
             lastNode = bodyNode.lastElementChild
             console.log(lastNode)  
             
            // 2.创建节点
            //document.createElement(标签名)  - 创建指定标签对象的节点对象
            //注意: 创建的节点在没有添加在网页中的时候是不会显示的
            inputNode = document.createElement('input')
            
            //3.添加节点
            div2Node = document.getElementById('div2')
            
            // 节点1.appendChild(节点2) - 在节点1的最后添加节点2
            div2Node.appendChild(inputNode)
            
            // 节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前出入节点2
            div2Node.insertBefore(inputNode, div2Node.firstElementChild)
            
            // 4.拷贝节点
            // 节点.cloneNode()  - 赋值指定节点，产生一个新的节点
            inputNode2 = inputNode.cloneNode()
            inputNode2.placeholder = '新节点'
            div2Node.appendChild(inputNode2)
            
            //5.删除节点
            //a)节点1.removeChild(节点2)  -  删除节点1中的节点2
            div2Node.removeChild(div2Node.firstElementChild)
            
            //b)节点.remove() - 删除指定节点
            div2Node.remove()

2.DOM练习

            

                
11
                
12
                
13
            
            

                
21
                
22
                
23
            
            

                
31
                
32
                
33
            
            
        
        
        
        

4.定时事件

5.自动跳转

    
        
        
    
    
        
5秒后自动跳转
        
        
    

6.事件

    
        
        
    
    
        
        按钮1
        删除1
        删除2
        


        
        
        删除
        删除3
        删除4
        删除5
        


        
        
        按钮
        
    

7.常见事件类型

    
        
        
        
    
    
        
我是段落