7.18笔记，增删改查、盒子模型

7.18 笔记

1、增删改查：

• 节点的创建：

		    <div class="mydiv">
				100
			</div>
			<script>
				//创建了一个新的元素节点
				let newNode = document.createElement('h1');
				newNode.innerText = 'DABIAOTI';
				console.dir(newNode);
				//把该节点追加到body里面-->append-->追加在最后面
				document.body.append(newNode);
				// 把该节点追加到指定的节点里面-->append-->追加在最后面
				// 一个节点只能在一个地方显示
				document.getElementsByClassName('mydiv')[0].append(newNode);

			</script>

• 节点追加到指定的位置
  Document.createElement()在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

			<ul>
				<li>节点1</li>
				<li>节点2</li>
				<li>节点3</li>
				<li id="fourth">节点4</li>
				<li>节点5</li>
			</ul>
			<script>
				let li = document.createElement('li');
				li.innerHTML = 'new node';
				//插入到指定的节点面前fourth：屎getElementById('fourth')的简写
				document.querySelector('ul').insertBefore(li, fourth);
				// 在指定节点的后面插入一个新的接待你-->insertBefore-->node.nextElementSibling


				let newli = document.createElement('li');
				newli.innerText = '在4的后面插入一个新的节点';
				document.querySelector('ul').insertBefore(newli, fourth.nextElementSibling);

			</script>

• Node.cloneNode() 方法返回调用该方法的节点的一个副本；语法：var dupNode = node.cloneNode(deep);
  deep：是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身

			<ul>
				<li>节点1</li>
				<li>节点2</li>
				<li>节点3</li>
				<li id="fourth">节点4</li>
				<li>节点5</li>
			</ul>
			<hr>
			<script>
				let ul=document.querySelector('ul');
				// 是否采用深度克隆，如果为true，则该节点的所有后代节点都会被克隆，如果为false，则会返回节点本身
				let newNode=ul.cloneNode(true);
				console.dir(newNode);
				// 追加到页面上
				document.body.appendChild(newNode);
			</script>

• Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点

			<ul>
				<li>节点1</li>
				<li>节点2</li>
				<li>节点3</li>
				<li id="fourth">节点4</li>
				<li>节点5</li>
			</ul>
			<hr>
			<script>
				// 通过父级删除指定的子节点
				let ul=document.querySelector('ul');
				let fourth=document.getElementById('fourth');
				ul.removeChild(fourth);

				// 通过节点删除自己
				document.getElementsByTagName('li')[3].remove();
			</script>

• Node.replaceChild() 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

			<ul>
				<li>节点1</li>
				<li>节点2</li>
				<li>节点3</li>
				<li id="fourth">节点4</li>
				<li>节点5</li>
			</ul>
			<hr>
			<script>
				// 通过父级替换指定的子节点
				let ul = document.querySelector('ul');
				let fourth = document.getElementById('fourth');

				// 需要创建一个新的节点
				let newli = document.createElement('li');
				newli.innerHTML = '这是替换后的节点';
				ul.replaceChild(newli, fourth);
			</script>

2、盒子模型

1.盒模型信息获取：
节点.getBoundingClientRect()：得到一个元素的尺寸和坐标位置；
a)left和top对应的是左上角x,y坐标；
b)right和bottom对应的是右下角x,y坐标；
c)如果遇到浏览器返回的ClientRect里面如果没有width和height， 可以通过上面的坐标关系计算出来；
2.得到一个盒子的相关尺寸信息属性：
a)offsetWidth：本身宽度+边框线+左右内边距；
b)offsetHeight：本身高度+边框线+上下内边距；
c)offsetTop：相对有定位属性的父节点上偏移量；
d)offsetLeft：相对有定位属性的父节点左偏移量；
e)clientWidth：本身的宽度+左右内边距；
f)clientHeight：本身的高度+上下内边距；
g)clientTop：上边框线的宽度；
h)clientLeft：左边框线的宽度；
i)scrollWidth：盒子的实际宽度(包括不可见部分) ；
j)scrollHeight：盒子的实际高度(包括不可见部分)；
k)scrollTop：滚动条向下滚动的距离；
l)scrollLeft：滚动条向右滚动的距离；
m)window.innerHeight：浏览器窗口可见区域高度；
n)window.innerWidth：浏览器窗口可见区域宽度;