拓展DOM
## 1.父节点parentNode(亲爹)
* parentElement
~~~
<div>
<p id="child">hello world</p>
</div>
<script>
let child = document.getElementById("child");
console.log(child.parentNode)
</script>
~~~
例子
~~~
<li>苹果<a href="#">删除</a></li>
<li>小米<a href="#">删除</a></li>
<li>华为<a href="#">删除</a></li>
<script>
var childs = document.getElementsByTagName("a");
for(let i =0;i<childs.length;i++){
childs[i].onclick = function(){
this.parentNode.style.display = "none";
return false;
}
}
</script>
~~~
## 2.子节点childNodes和children的区别
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
console.log(childs.length)
//输出7,将空格也算作节点
</script>
~~~
> childNodes是获取所有类型的子节点
> children只会获取元素类型子节点
eg:将子节点的背景色变为粉色
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType == 1){
childs[i].style.color = "red";
}
}
</script>
~~~
* firstChild //包含所有类型的节点
* firstElementChild //IE9以下不兼容
* lastChild //所有类型的节点
* lastElementChild //IE9以下不支持
兼容问题的解决
//firstElementChild在ie9以上是一个对象，9以下undefined
~~~
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parent = document.getElementById("parent");
var first = parent.firstElementChild;
if(first){
first.style.color = "red";
}else{
parent.firstChild.style.color="green"
}
</script>
~~~
## 3.兄弟节点
> nextSibling
> nextElementSibling //IE9以下不支持
> previousSibling
> previousElementSibling //IE9以下不支持
## 4.
* offsetParent //获取给了定位元素的父级
* offsetLeft //返回元素的相对定位父元素水平偏移位置。 返回number
* offsetTop //返回元素的相对定位父元素水平垂直偏移位置。
* offsetWidth //返回元素的宽度 -- 包含width,padding,border
* offsetHeight //返回元素的高度
~~~
//获取元素距离顶部的距离
function getTop(element){
var realTop = element.offsetTop;
var parent = element.offsetParent;
while(parent !==null){
realTop+=parent.offsetTop;
parent = parent.offsetParent;
}
return realTop;
}
~~~
~~~
//jquery的实现
$(element).offset().top;
~~~
## 5.操作元素的属性
* oDiv.style.display = "none";
* oDiv.style["display"]="none";
* oDiv.setAttribute("style","display:none");
~~~
<input type="text" id="txt">
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
btn.onclick = function(){
// txt.value = "hello world"
txt.setAttribute("value","hello world")
}
</script>
~~~
> 获取,设置,删除
> getAttribute(AttrName);
> setAttribute(AttrName,AttrValue);
> removeAttribute(AttrName);
demo:动态给div添加title属性
~~~
<div id="test">hello world</div>
<script>
let test = document.getElementById("test");
test.onclick = function(){
test.setAttribute("title","setAttr")
}
</script>
~~~
## 6.浏览器窗口可视区域的大小
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
~~~
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
~~~
二、对于 Internet Explorer 8、7、6、5：
~~~
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
~~~
//没有DOCTYPE的IE中,浏览器显示窗口可以通过以下获取
Document对象的body属性对应HTML文档的标签
~~~
• document.body.clientHeight
• document.body.clientWidth
~~~
~~~
// 获取可视区域的width
var vw = document.body.clientWidth || document.documentElement.clientWidth;
//设备的宽度
var dw = window.screen.availWidth;
console.log(vw);
~~~
## 7获取网页内容的宽高
* document.documentElement.scrollHeight
* document.documentElement.scrollWidth
## 8文档碎片
> 文档碎片可以提高DOM操作性能
> document.createDocumentFragment()
> 原理:将dom暂存在fragment上，之后一次性添加到dom
~~~
</ul>
<script>
var parent = document.getElementById("parent");
var oFrag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var li = document.createElement("li");
oFrag.appendChild(li);
}
parent.appendChild(oFrag);
</script>
~~~
## 9表格应用
* 获取
* tBodies,tHead,rows,cells
* 隔行变色
* 添加
~~~
//css
table,th,td{
border:1px solid #333;
width:500px;
line-height:50px;
text-align: center;
}
table{
border-collapse: collapse;
}
//html
<table>
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
</tbody>
</table>
~~~
~~~
//JS
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tRows = table.tBodies[0].rows;
tHead.style.backgroundColor = "#ff2d51";
for(let i=0;i<tRows.length;i++){
if(i%2 ==0 ){
tRows[i].style.backgroundColor = "#eee";
}else{
tRows[i].style.backgroundColor = "#44cef6"
}
}
</script>
~~~
动态添加表格
~~~
<h4>动态添加表格</h4>
<div>
<input type="text" id="shop">
<input type="text" id="cellPhone">
<button id="add">add</button>
</div>
<table id="table">
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr>
<td>天猫</td><td>小米</td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tBody = table.tBodies[0];
let shop = document.getElementById("shop");
let cellPhone = document.getElementById("cellPhone");
let add = document.getElementById("add");
add.onclick = function(){
let tr = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerHTML = shop.value;
tr.appendChild(td1);
let td2 = document.createElement("td");
td2.innerHTML = cellPhone.value;
tr.appendChild(td2);
tBody.appendChild(tr);
}
</script>
~~~
