js操作DOM

js节点迭代器

        function getChildren(parent){
			//1.创建节点迭代器对象
			let iterator = document.createNodeIterator(
				parent, NodeFilter.SHOW_ELEMENT, null, false
			);
			//2.反复调用iterator的nextNode方法跳到下一个
			do{
				let node = iterator.nextNode();
				if(node != null)
					console.log(node.nodeName);
				else
					break;
			}while(true);
		}

---

HTML查询

document.getElementById()
parent.getElementsByTagName()
document.getElementsByName()
parent.getElementsByClassName()

---

选择器查询

parent.querySelector('selector')
parent.querySelectorAll('selector')

---

DOM操作4步

查找触发事件的元素
绑定事件
    查找要修改的元素
    修改元素

---

创建DOM节点

        //1.创建空元素
		let a = document.createElement('a');
		//2.设置关键属性
		a.href = 'http://www.baidu.com/';
		a.innerHTML = '百度一下';
		//3.将新元素添加到DOM树
			//3.1末尾追加
			//parent.appendChild(a);
			//document.body.appendChild(a);

			//3.2中间插入
			//parent.insertBefore(a, child);
			//document.body.insertBefore(a, document.getElementById('display'));

			//3.3替换
			//parent.replaceChild(a, child);
			//document.body.replaceChild(a, document.getElementById('display'));

---

同时添加多个平级子元素

        //1.创建文档片段对象
		let frag = document.createDocumentFragment();
		//2.将子元素添加到文档片段中
		frag.appendChild(child);
		//3.将文档片段一次性添加到DOM树指定父元素下
		parent.appendChild(frag);

---

HTML DOM简化对象之table

        //table:管着行分组
		//创建:
			let thead = table.createTHead();
			let tbody = table.createTBody();
			let tfoot = table.createTFoot();
		//删除:
			table.deleteTHead();
			table.deleteTFoot();
		//获取:
			table.tHead;
			table.tFoot;
			table.tBodies[i];

		//行分组:管着行
		//创建:
			let tr = 行分组.insertRow(i);
			1.在结尾追加一行:行分组.insertRow();
			2.在开头插入一行:行分组.insertRow(0);
		//删除:
			行分组.deleteRow(i);
			强调:主语是行分组时，i要求是在行分组内的相对下标位置
		//获取:
			行分组.rows;
			获得行分组内所有行的集合

		//行:管着格
		//创建:
			let td = tr.insertCell(i);
			末尾追加:tr.insertCell();
		//删除:
			tr.deleteCell(i);
		//获取:
			tr.cells;

---

js获取选中的文本

    <textarea id="txt">被伤过的心还可以爱谁 没人心疼的滋味 我给你的爱 已经被掩埋 我舍不得这样放开</textarea>

	<!-- script -->
	<script>
		function getSelect(){
			let select = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
			console.log(select);
		}
		
		document.getElementById('txt').addEventListener(
			'select', getSelect
		);
	</script>
	<!-- script -->

---

鼠标坐标：3对

        相对于屏幕左上角：e.screenX、e.screenY
		相对于文档显示区左上角：e.clientX、e.clientY
		相对于当前元素左上角：e.offsetX、e.offsetY

---

页面滚动：window.onscroll

        滚动距离：document.body.scrollTop
        document.documentElement.scrollTop

---

自定义控制滚动

            window.scrollTo(x方向的位置, y方向的位置)
			拿到某一个元素距离页面顶部的距离
				do{
					sum += elem.offsetTop;
					elem = elem.offsetParent;
				}while(elem);
				因为offsetTop可能是top、margin、padding某一项造成的