js的document对象

知识总结：

 1.document获取元素对象：
 直接方式：
 第一种：通过元素id
 document.getElementById("id名");
 第二种：通过name属性
 document.getElementsByName("name名");返回数组NodeList
 第三种：通过标签名
 document.getElementsByTagName("标签名");返回数组 HTMLCollection
 

 间接方式：
 父子关系：获取父元素，根据属性childeNodes获取所有的子元素
 子父关系：获取子元素，根据属性parentNode获取父元素
 兄弟关系：先获取元素，使用属性previousSibling、nextSibling获取元素
 

 在js中获取到的html元素是转化后的对象，使用对象存储方便。
 间接方式中，获取子元素和获取兄弟元素需要注意某些浏览器会将空行作为对象元素的问题。
 

 2.document操作元素属性：（先要获取元素对象）：
 获取元素属性值：
 固有属性：元素对象名.属性名
 自定义属性：元素对象名.getAttribute("属性名");
 

 注意：固有属性方式不能获取自定义属性
 自定义属性方式可以获取固有属性值，但对于value属性获取的是默认值
 修改元素属性值：
 修改固有属性：对象名.属性名="属性名"，注意name属性和id属性的值不要轻易更改
 修改自定义属性值：对象名.setAttribute("属性名","属性值");
 

 3.document操作元素内容：
 innerHTML：
 获取元素内容：获取全部内容包括HTML标签
 修改元素内容：原有值被覆盖，HTML标签会被解析
 

 innerText:
 获取元素内容：获取的是元素中的文本内容，不包括HTML标签
 修改元素内容：原有内容会被覆盖，但是HTML标签不会被解析
 

 4.document操作元素样式：
 使用style属性：
 增加元素样式：对象名.style.样式名="样式值"；//样式名如果存在"-"，把"-"删除改成驼峰
 删除元素样式：对象名.style.样式名="";
 

 使用className：
 增加样式：对象名.className="类选择器名"
 删除样式：对象名.className="";
 

代码示例：

    
        
        
        
        
    
    
        

            
            
            
        
        

        

            
            
            
        
        

        

            
            

            呵呵哒