04-doucument对象属性和方法

04-doucument对象属性和方法

由节点组成
1、元素节点: html body div button
2、文本节点：展示的内容<div>...</div>
3、属性节点：<input type="text" />

//document.activeElement	返回当前获取焦点元素
//document.addEventListener()	向文档添加句柄
//document.createElement()	创建元素节点
//createTextNode() 创建文本节点。
//节点对象属性和方法：
//appendChild() 可向节点的子节点列表的末尾添加新的子节点
//扩展  需求：二个列表，单击按钮时，左边最后一个数据移动到右边
//lastChild    返回最后一个子节点
//firstChild    返回第一个子节点
//childNodes    返回所有子节点
//nodeType 节点类型   元素节点的属性是返回1   文本节点的属性是返回3

html文件：

<div id="my">
		<div id="test">hello world</div>
		<input type="text" value="输入信息" />
		<button class="btn">按钮</button>

		<div>
			<ul class="listL"><li>red</li><li>orange</li></ul>
			<ul class="listR"><li>apple</li><li>banana</li></ul>
			<button class="change">左边列表最后一个移入右边</button>
		</div>

		<div>
				<ul class="listL2">
					<li>red</li>
					<li>orange</li>
				</ul>
				<ul class="listR2">
					<li>apple</li>
					<li>banana</li>
				</ul>
		</div>
</div>			

js文件：

//返回当前获取焦点元素的id 
alert(document.activeElement.id); //my
document.getElementById("my").onclick=function(){
	var _name = document.activeElement.tagName; //是body
}
//document.addEventListener()	向文档添加句柄
document.getElementById("my").addEventListener('click',function(){
	var _name = document.activeElement.tagName;
	document.getElementById("test").innerHTML = _name;
});

//document.createElement()	创建元素节点。
//动态的操作DOM，添加内容 <div>hello world</div>
document.querySelector(".btn").onclick=function(){
		var _div = document.createElement("div");//元素节点
		var _text = document.createTextNode("hello world");	//创建文本节点。
		_div.appendChild(_text);   //把文本节点添 加到元素节点末尾
		document.body.appendChild(_div);
}
	
//lastChild    返回最后一个子节点
//firstChild    返回第一个子节点
//扩展二  需求：二个列表，左侧选 中的数据移入到右侧
	var _listL = document.querySelector(".listL");
	var child = _listL.childNodes;   //获取所有子节点  ['red','orange']
	console.log(child.length);  //2
	for(var i=0;i<child.length;i++){
		child[i].onclick = function(){   //arr[0]
			document.querySelector(".listR").appendChild(this);   //this表示当前单击的对象
		}
	};

//可能会出现的问题  有空格也算节点
//nodeType 节点类型   元素节点的属性是返回1   文本节点的属性是返回3