JS基础 DOM对象

JS基础 DOM对象

获取节点

getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准

//按照id获取
function testById(){
	var p = document.getElementById("p1");
	console.log(p);
}

getElementsByTagName() 根据标签名获取dom对象数组

//按照标签名获取
function testByTagName(){
	var inputs = document.getElementsByTagName("input");
	console.log(inputs);
}

getElementsByClassName() 根据样式名获取dom对象数组

//按照class获取
function testByClass(){
	var paras = document.getElementsByClassName("para");
	console.log(paras);
}

getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值

//按照name获取
function testByName(){
	var hobbys = document.getElementsByName("hobby");
	console.log(hobbys);
	var text = document.getElementsByName("txt")[0];
	console.log(text);
}

注意：
a标签正常会执行跳转的操作，设置href=“javascript:void(0)” 表示伪协议 将不会跳转

​ 操作 dom 必须等节点初始化完毕后，才能执行
​ 处理方式两种:
​ （1）把 script 调用标签移到html末尾即可；
​ （2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

​ window.onload = function(){ }

创建和添加元素

创建节点和插入节点
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
如果追加的元素不存在，则添加新的；如果追加的元素存在，则会将 原有的元素添加到新的位置（剪切）
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点 需要参考父节点

<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<select name="music">
	<option value="-1">你心内的一首歌</option>
	<option value="0">南山南</option>
	<option value="1">喜欢你</option>
</select>
<hr />
<div id="container"></div>
		
<span>周杰伦</span>
<script type="text/javascript">
	//获取需要添加节点的位置
	var div = document.getElementById("container");
			
	//添加段落
	function addPara(){
		//方式一
		//创建元素节点
		/* var p = document.createElement("p");
		//创建文本节点
		var text = document.createTextNode("段落标签");
		//将文本节点追加到元素节点的内部
		p.appendChild(text);
		//将元素追加到div的内部
		 */
		
		
		//方式二
		//创建元素节点
		/* var p = document.createElement("p");
		p.innerHTML = "段落方式二";
		console.log(p); 
		div.appendChild(p);*/
		
		
		//方式三
		var p = "<p>段落方式三</p>";
		//给div设置内容
		div.innerHTML += p;
		
	}
	
	//添加图片
	function addImg(){
		//方式一
		//创建一个图片
		/* var img = document.createElement("img"); 
		//设置图片属性
		img.src = "img/lbw.jpg";
		img.width = "100";
		img.height = "100";
		//将图片追加到指定位置
		div.appendChild(img); */
				
		//方式二
		//创建一个图片
		/* var img = document.createElement("img"); 
		//设置图片属性
		img.setAttribute("src","img/lbw.jpg");
		img.setAttribute("width","100");
		img.setAttribute("height","100");
		//将图片追加到指定位置
		div.appendChild(img); */
				
		//方式三
		var str = "<img src='img/lbw.jpg' width='100' height='100' />";
		div.innerHTML += str;
	}
		
	//添加文本框
	function addTxt(){
		//方式一
		var input = document.createElement("input"); 
		/*input.type = 'text';
		input.name = 'uname';
		 */
		
		//方式二
		// setAttribute设置属性
		input.setAttribute("type",'text');
		div.appendChild(input);
		
	}

	//添加选项
	function addOptions(){
		//用户输入歌曲名称
		var sname = prompt("请输入歌曲名称");
		
		//获取下拉框的节点
		var select = document.getElementsByName("music")[0];
		
		//方式一
		//创建下拉选项
		/* var option = document.createElement("option");
		//设置下拉选项的内容
		option.innerHTML = sname;
		//设置属性
		option.value = 2;
		//将下拉选项追加到下拉框中
		select.appendChild(option); */
		
		//方式二
		/* var options = select.options; //下拉框的所有下拉选项
		//创建下拉选项
		var newOption = document.createElement("option");
		newOption.innerHTML = sname;
		//将选项添加到下拉框数组中
		options.add(newOption); */
		
		//方式三
		var options = select.options; //下拉框的所有下拉选项
		//创建下拉选项
		var newOption = new Option();
		console.log(newOption);
		newOption.innerHTML = sname;
		//将选项添加到下拉框数组中
		options.add(newOption);
	}

	//将任意的字符串插入到文档中
	// document.write("到爱打架欧艾斯");
	
	//insertBefore
	//获取目标位置
	var select = document.getElementsByName("music")[0];
	//获取需要移动的元素节点
	var zjl = document.getElementsByTagName("span")[0];
	//参考父节点   
	var parent = select.parentElement;
	parent.insertBefore(zjl,select);
	
</script>

间接查找节点

childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点

<div id="div1">
	<span>span 1号</span><span>span 2号</span>
	<div>块级元素</div>
</div><span>兄弟节点</span>

<script type="text/javascript">
	var div1 = document.getElementById("div1");
	//childNodes
	var childNodes = div1.childNodes;
	console.log(childNodes);
	//firstChild
	console.log(div1.firstChild);
	//lastChild
	console.log(div1.firstChild);
	//nextSibling
	console.log(div1.nextSibling);
	//parentNode
	console.log(div1.parentNode);
	//previousSibling
	console.log(div1.previousSibling);
</script>

删除节点

removeChild() 从元素中移除子节点
目标节点.父节点.removeChild(目标节点);

function fun(){
	//获取目标节点
	var div = document.getElementsByTagName("div")[0];
	//删除
	div.parentElement.removeChild(div);
}