子节点_children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
<script>
// children 查看自己的子节点
var ul = document.getElementById('ul');
for(var i = 0;i < ul.children.length;i++){
ul.children[i].style.background = 'red';
}
alert(ul.children.length);
</script>
</body>
</html>
父节点_parentNode
parentNode这个插入方式,是在最后插入的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul id="ul">
<li><a href="#">隐藏1</a></li>
<li><a href="#">隐藏2</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏3</a></li>
</ul>
<script>
var y = 1;
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++){
aA[i].onclick = function(){
this.parentNode.style.display = 'none';
console.log('事件触发'+ y++ +'次');
}
}
</script>
</body>
</html>
父节点_insertBefore
insertBefore这个插入方式是可以选择插入位置的,格式是insertBefore(需要插入的子节点,在谁之前).这种方式存在兼容问题IE7不支持需要用if解决兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="btn1">
<input type="button" value="按钮" id="btn2">
<ul id="ul">
</ul>
<script>
var ul = document.getElementById('ul');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var ali = ul.getElementsByTagName('li');
btn2.onclick = function(){
var li = document.createElement('li');
li.innerHTML = btn1.value;
// 在父级里面appendChild一个子元素li
ul.insertBefore(li,ali[0]);
}
</script>
</body>
</html>