本文共 5136 字，大约阅读时间需要 17 分钟。

什么是html中的节点

一个html页面加载完成他会形成一个dom树，树上的每一个dom对象都是一个节点，可以理解为节点就是html中的标签对象，但不止是标签对象。

节点常用的几个方法

getElenmentsByTagName(tagename)

语法: 节点.getElenmentsByTagName(tagename) tagname是标签名 获取到当前节点的指定标签名的孩子节点

createElement() 语法 对象.createElement() 在对象中创建一个对象，比如document.createElement()就是在页面中创建一个对象，这个对象创建完成后还是在内存里面，我们需要把它放在指定的标签里面所有我们一般要配合appendChild() 或 insertBefore()方法使用

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

createTextNode(文本) 用于创建一个文本对象，()中输入文本内容，即把文本创建为一个对象，然后进行操作

节点常用的几个属性

insertBefore()

在节点的子节点列表任意位置插入新的节点(属于jquery操作，此处不作讲解)

childNodes

获取当前节点的所有子节点

firstChild

获取当前节点的第一个子节点

lastChild

获取当前节点的最后一个子节点

parentNode

获取当前节点的父节点

nextSibling

获取当前节点的下一个节点

previousSibling

获取当前节点的上一个节点

className

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

innerHTML

表示获取或设置起始标签和结束标签中的内容

innerText

表示获取或设置其实标签和结束标签中的文本

按照例子具体说明

   
			
    
				
     
					你喜欢哪个城市？				
			
     
				
      
北京
				
      
上海
				
      
东京
				
      
首尔
			
     
			
     
			
     
			
     
				你玩什么游戏？			
			
     
				
      
王者
				
      
连连看
				
      
逆水寒
				
      
LOL
			
     
			
     
			
     
			
     
				你手机操作系统？			
			
     
				
      
ios
				
      
android
				
      
window phone
				
      
hongmengos
			
     
			
    
						
    
     				gender:				
     				Male				
     				female				
     
				
     
				name:				
     			
    
		
   

创建主体

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

先创建这么多的按钮 即 要求

1.查找id=bj的节点

window.onload=function(){   document.getElementById("btn01").onclick=function(){   					//先选中id为btn01的按钮为其增加函数					var obj=document.getElementById("bj");					console.log(obj);				}			}

后面的代码都需要放在window.onload=function(){}函数里面，下面不再添加

2.查找所有的li标签

document.getElementById("btn02").onclick=function(){   					var obj_List=document.getElementsByTagName("li");					var i=0;					do{   						console.log(obj_List[i]);						i++;					}while(i

3.查找name=gender的所有节点

document.getElementById("btn03").onclick=function(){   					var obj_List=document.getElementsByName("gender");					var i=0;					do{   						console.log(obj_List[i].value);						i++;					}while(i

以上三种是我们之前所学的知识不是本章主要内容，不再赘述

一些方法的具体使用方法

createTextNode(文本)

window.onload=function(){   				var obj=document.createElement("div");				var obj1=document.createTextNode("嘿嘿！");				obj.appendChild(obj1);				document.body.appendChild(obj);			}

可以直接把文本转换为对象，然后用appendChild(obj1)添加到div中，然后再添加到body中

appendChild(oChildNode)

问题描述：使用js代码来创建html标签，并显示在页面上，标签内容：<div>阿涵，你真帅</div>

1.创建div对象 2.向div里面加入值 3.把整个div对象放在body里面

window.onload=function(){   				//1.创建div对象				var obj=document.createElement("div");				//2.向div里面加入值				obj.innerHTML="阿涵，你真帅";				//3.把整个div对象放在body里面				document.body.appendChild(obj);			}

节点.getElenmentsByTagName()

查找id=city标签对象下的所有li标签对象

document.getElementById("btn04").onclick=function(){   	var obj=document.getElementById("city");//先获得id=city的标签对象	var obj_List=obj.getElementsByTagName("li");//再 节点.getElementsByTagName("li") 获得其子节点的集合	var i=0;	do{   		console.log(obj_List[i].innerHTML);		i++;	}while(i

一些属性的具体使用方法

以下所有的描述属性的代码都是一个思路，第一步是先获得按钮对象，设置按钮点击函数(onclick)，然后其函数里面第一行先获得其父节点或者子节点或者自己节点的对象，然后后面再获取自己节点再节点.属性进行操作调用。

childNodes

返回city所有的子节点

document.getElementById("btn05").onclick=function(){   					var obj=document.getElementById("city");					var obj_List=obj.childNodes;					var i=0;					do{   						console.log(obj_List[i].tagName);						i++;					}while(i

这里本是四个li标签节点，但在dom树里面字符也是节点，所以在两个li标签间的“回车”字符也是一个节点，所以会返回undefined(未定义的对象)

firstChild

返回id=phone的标签的第一个子节点

document.getElementById("btn06").onclick=function(){   					var obj1=document.getElementById("phone")					var obj2=obj1.firstChild;					alert(obj2.innerHTML);				}

此时，其第一个子节点为“回车”，所以返回值为undefined，所以我们可以这样写

parentNode

返回id=bj的标签的父节点

document.getElementById("btn07").onclick=function(){   					var obj1=document.getElementById("bj")					var obj2=obj1.parentNode;					alert(obj2.tagName);				}

previousSibling

返回id=android的标签的第一个兄弟标签

document.getElementById("btn09").onclick=function(){   					var obj1=document.getElementById("android");					var obj2=obj1.previousSibling;					alert(obj2.innerHTML);				}

value

设置id=username的标签的value属性值

document.getElementById("btn10").onclick=function(){   					var obj1=document.getElementById("username");					obj1.value="123456789";					alert(obj1.value);				}

innerHTML

查找id=bj标签的文本值

document.getElementById("btn11").onclick=function(){   					var obj1=document.getElementById("bj");					alert(obj1.innerHTML);				}

innerText

作用：获取到标签中的文本内容，注意！只是文本内容，只会获取到标签其中的文本。其他的全部忽略。

比如以下例子： 下面是测试innerHTML

document.getElementById("btn11").onclick=function(){   					var obj1=document.getElementById("city");					alert(obj1.innerHTML);				}

这个innerHTML打印的标签内容，如下

下面是测试innerText

document.getElementById("btn11").onclick=function(){   					var obj1=document.getElementById("city");					alert(obj1.innerText);				}

这个值只会打印其中的文本，其他部分全部忽略，效果如下

属性的补充说明

一些属性不再赘述，操作几乎一样。

转载地址：http://qtbmz.baihongyu.com/