parentNode，獲取元素的父級
<ul>
<li id="test">hello world</li>
</ul>
<script>
var test = document.getElementById("test");
test.onclick=function(){
console.log(this.parentNode)
}
</script>
小效果
<ul>
<li>hello world1 <button class="btn">隱藏</button></li>
<li>hello world2 <button class="btn">隱藏</button></li>
<li>hello world3 <button class="btn">隱藏</button></li>
<li>hello world4 <button class="btn">隱藏</button></li>
</ul>
<script>
/*1.獲取所有的btn*/
var btns = document.getElementsByClassName("btn");
/*2.對btns進行遍歷*/
for(var i =0;i<btns.length;i++){
/*3.對每一個btn執(zhí)行點擊事件*/
btns[i].onclick = function(){
/*4.把正在執(zhí)行點擊事件的btn隱藏*/
this.parentNode.style.visibility = "hidden";
}
}
</script>
childNodes 所有類型的節(jié)點既有元素節(jié)點,也有文本節(jié)點
<ul id="test">
hello world
<li>1</li>
<li>2</li>
</ul>
<script>
var test = document.getElementById("test");
var childs = test.childNodes;
for(var i =0;i<childs.length;i++){
if(childs[i].nodeType == 1){
childs[i].style.background="red";
}
}
</script>
children只會讀取元素節(jié)點
<ul id="test">
hello world
<li>1</li>
<li>2</li>
</ul>
<script>
var test = document.getElementById("test");
var childs = test.children;
alert(childs.length)
</script>
firstChild獲取的一個子節(jié)點(不會識別節(jié)點的類型)
<ul id="test">
hello world
<li>1</li>
<li>2</li>
</ul>
<script>
var test = document.getElementById("test");
var first = test.firstChild;
alert(first);
</script>
firstElementChild的兼容處理
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var test = document.getElementById("test");
if(test.firstElementChild){
//ie9+加其他瀏覽器
test.firstElementChild.style.background="pink"
}else{
//ie8
test.firstChild.style.background="red";
}
</script>
nextSibling(獲取任意類型的節(jié)點)
<ul id="test">
<li id="one">1</li>
<li id="two">2</li>
<li>3</li>
</ul>
<script>
var two = document.getElementById("two");
var sibling =two.previousElementSibling;
console.log(sibling)
</script>
offsetParent獲取給了定位元素的父級
//css
<style>
#parent{
position: relative;
}
#child{
margin-left: 200px;
width:100px;
height:100px;
left:200px;
top:100px;
position: absolute;
background-color: red;
}
</style>
//html
<div id="parent">
<div id="child">
</div>
</div>
<script>
/*offsetParent獲取給了定位元素的父級*/
var child = document.getElementById("child");
alert(child.offsetWidth);
console.log(child.offsetParent)
</script>
改變元素的樣式
//css
<style>
#parent{
position: relative;
}
#child{
margin-left: 200px;
width:100px;
height:100px;
left:200px;
top:100px;
position: absolute;
background-color: red;
}
</style>
//html
<div id="parent">
<div id="child">
</div>
</div>
<script>
var child = document.getElementById("child");
child.setAttribute("style","display:none")
</script>
小效果
<input type="text" id="input" value="hello world"/>
<button id="btn">點擊</button>
<script>
var input = document.getElementById("input");
var btn = document.getElementById("btn");
btn.onclick=function(){
// input.value="hello world"
input.removeAttribute("value")
}
</script>
小效果
//css
<style>
ul{list-style: none}
*{margin:0;padding:0}
.table{
text-align: center;
margin-top: 100px;
margin-left:auto;
margin-right: auto;
width:350px;
border:1px solid #333;
}
.tab_wrap{
border-top: 1px solid #333;
position: relative;
height:300px;
}
.tab_wrap>div{
position: absolute;
height:100%;
width:100%;
}
.tab{
line-height: 50px;
}
.tab>li{
display: inline-block;
cursor: pointer;
}
input{
margin-top: 15px;
width:250px;
height:40px;
}
.code{
display: none;
}
.tab>li:first-child{
color:orangered;
}
</style>
<div class="table">
<ul class="tab">
<li class="tab_menu">賬號登錄</li>
<li class="tab_menu">掃碼登錄</li>
</ul>
<div class="tab_wrap">
<div class="account tab_content">
<p><input type="text" placeholder="請輸入手機號"/></p>
<p><input type="password" placeholder="請輸入密碼"/></p>
<p><input type="submit" placeholder="請輸入密碼"/></p>
</div>
<div class="code tab_content">
</div>
</div>
</div>
<script>
/*獲取兩個被點擊的li*/
var tabs = document.getElementsByClassName("tab_menu");
/*獲取兩個顯示的div*/
var contents = document.getElementsByClassName("tab_content");
for(var i=0;i<tabs.length;i++){
tabs[i].value = i;
/*給每個li一個點擊事件,讓對應(yīng)的div顯示*/
tabs[i].onclick=function(){
/*讓所有的li的字體的顏色為#333*/
var siblings = document.getElementsByClassName("tab")[0].children;
for(var k =0;k<siblings.length;k++){
siblings[k].style.color="#333"
}
/*讓正在被點擊的字體的顏色為orangered*/
this.style.color="orangered";
/*讓所有的content隱藏*/
for(var j=0;j<contents.length;j++){
contents[j].style.display="none"
}
/*讓對應(yīng)的顯示就行*/
contents[this.value].style.display="block";
}
}
</script>
