JS 之Node节点的 属性、方法 &获取

JS Node节点的常见属性和方法使用 & 如何获取相应节点和值

一、节点的常用属性和方法

（一）通过具体的元素节点调用如下方法和属性

《1》getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点

《2》appendChild(oNode)
方法给标签对象添加子节点。oNode是要添加的子节点。

《3》removeChild(oNode)
removeChild方法删除子节点。oNode是要删除的孩子节点

《4》cloneNode( [bCloneChildren])
cloneNode方法克隆一个对象。

《5》bCloneChildren表示是否需要克隆孩子节点

《6》getAttribute(sAttributeName)

getAttribute方法获取属性值。sAttributeName是要获取的属性名

（二）属性：

childNodes
属性，获取当前节点的所有子节点

firstChild
属性，获取当前节点的第一个子节点

lastChild
属性，获取当前节点的最后一个子节点

parentNode
属性，获取当前节点的父节点

nextSibling
属性，获取当前节点的下一个节点

previousSibling
属性，获取当前节点的上一个节点

className
用于获取或设置标签的class属性值

innerHTML 
属性，表示获取/设置起始标签和结束标签中的内容

eg: Node常用属性和方法如下测试

    
    
    
    

    
    
    
   
        
111
        span1
        span2
        span3
        
111
    

---

二、DOM对象节点查询 获取对应节点和值测试

（1）如下html中引入了CSS限制相应的div格式

CSS:此处练习CSS如何脱离html创建

@CHARSET "UTF-8";

body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

button {
    width: 300px;
    margin-bottom: 10px;
}

#btnList {

    float:left;
}

#total{
    width: 450px;
    float:left;
}

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.inner li{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float:left;
}

.inner{
    width:400px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding: 10px;
    float: left;
}

（2）上面创建的css引入到如下的html中

效果如下：

    

        你喜欢哪个城市?
    

    

        
北京
        
北京
        
上海
        
深证
    

    

    


    

        你喜欢的水果?
    

    

        
苹果
        
香蕉
        
哈密瓜
        
草莓
    

    

    


    

        你喜欢的手机是?
    

    
小米
苹果
华为



    gender:
    
    Male
    
    Female
    

    

    name:
    




查找#bj节点
查找所有li节点
查找name=gender的所有节点
查找#city下所有li节点
返回#city的所有子节点
返回#phone的第一个子节点
返回#bj的父节点
返回#android的前一个兄弟节点
返回#username的value属性值
设置#username的value属性值
返回#bj的文本值

如上测试其中截图：