DOM要点总结

一、基本介绍

在 HTML DOM （文档对象模型）中， 每个部分 都是节点：

1) 文档本身是文档节点

2) 所有 HTML 元素是元素节点

3) 所有 HTML 属性是属性节点

4) HTML 元素内的文本是文本节点

5) 注释是注释节点

二、节点常用方法

1. 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名

孩子节点

2. appendChild( oChildNode ) 方法，可以添加一个子节点， oChildNode 是要添加的孩子节

点

 

三、节点常用属性

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

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

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

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

5. nextSibling 属性，获取当前节点的下一个节点 ( 后一个 )

6. previousSibling 属性，获取当前节点的上一个节点 ( 前一个 )

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

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

9. innerText 属性，表示获取 / 设置起始标签和结束标签中的文本

四、案例分析

    
    
    
    



    

        

            你会的运动项目：
        
        足球
        台球
        乒乓球 

        

        

            你当前女友是谁：
        
        
            ---女友---
            艳红
            春桃
            春花
            桃红
        
        

        

            你的编程语言?
        

        

            
Java~~~
            
PHP
            
C++
            
Python
        


        

        

        

        

            个人介绍:
        
        个人介绍
    



    

        查找id=java节点
    
    

        查找所有option节点
    
    

        查找name=sport的节点
    
    

        查找id=language 下所有li节点
    
    

        返回id=sel01 的所有子节点
    
    

        返回id=sel01 的第一个子节点
    
    

        返回id=java 的父节点
    
    

        返回id=ct 的前后兄弟节点
    
    

        读取id=ct 的 value 属性值
    
    

        设置#person的文本域
    

@CHARSET "UTF-8";

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

button {
	width: 200px;
	margin-bottom: 10px;
	text-align: left;
}

#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;
	float:left;
}

.inner{
	width:400px;

	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}