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执行点击事件*/
btns[i].onclick = function(){
/*4.把正在执行点击事件的btn隐藏*/
this.parentNode.style.visibility = "hidden";
}
}
</script>
childNodes 所有类型的节点既有元素节点,也有文本节点
<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只会读取元素节点
<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获取的一个子节点(不会识别节点的类型)
<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(获取任意类型的节点)
<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一个点击事件,让对应的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"
}
/*让对应的显示就行*/
contents[this.value].style.display="block";
}
}
</script>
