04-doucument对象属性和方法

约定不等于承诺〃 2023-07-18 02:48 5阅读 0赞

## 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