节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>我是lis1</li>
<li>我是lis2</li>
<li>我是lis3</li>
<li>我是lis4</li>
<li>我是lis5</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="cvsss">
<div class="cv">
<span class="erweima">块</span>
</div>
</div>
<script>
// 元素节点nodeType：1 属性节点nodeType：2 文本节点nodeType：3
// 父节点 parentNode
var erweima = document.querySelector('.erweima');
console.log(erweima);
// 得到的是离得最近的父级节点 如果找不到父节点，就返回null
console.log(erweima.parentNode);
erweima.nodeType
//子节点 childNodes
var ul = document.querySelector('ul');
// 得到所有的子节点 包含元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); // 文本节点的类型是3
//获取所有子元素的节点 children 只获取元素
console.log(ul.children);
//获取父元素当中的第一个字元素节点(firstElementChild)和最后子元素节点(lastElementChild)
//只会获取元素节点，其他类型的节点不管 这俩个需要IE 9 以上兼容
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
console.log(ul.children[ul.children.length - 1]);
</script>
</body>
</html>
新浪下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.mmm {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
li {
/* 隐藏无序排列的点 */
list-style-type: none;
/* display: none; */
}
.navs {
display: none;
}
</style>
</head>
<body>
<ul class="nav">
<li class="mmm">
<a>新浪微博</a>
<ul class="navs">
<li>登录</li>
<li>注册</li>
<li>返回</li>
<li>退出</li>
</ul>
</li>
<li class="mmm">
<a>腾讯</a>
<ul class="navs">
<li>登录</li>
<li>注册</li>
<li>返回</li>
<li>退出</li>
</ul>
</li>
<li class="mmm">
<a>微信</a>
<ul class="navs">
<li>登录</li>
<li>注册</li>
<li>返回</li>
<li>退出</li>
</ul>
</li>
</ul>
<script>
var ul = document.querySelector('.nav');
var lis = ul.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html>
兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>00000000</p>
<div>div</div>
<span>span</span>
<script>
var div = document.querySelector('div');
// 获取当前节点的下一个兄弟元素节点
console.log(div.nextElementSibling);
// 获取当前节点的上一个兄弟元素节点
console.log(div.previousElementSibling);
</script>
</body>
</html>
添加创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
// 向ul当中添加一个li节点,首先需要创建一个节点出来
var li = document.createElement('li');
// 获取需要插入的父节点 node.appendChild(child); node 是父级 child是子级
var ul = document.querySelector('ul');
ul.appendChild(li); // 默认插到已有元素的后面
// 插入已有元素的前面 node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
</html>
复制和删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<button>删除</button>
<button class="buu">复制</button>
<script>
// removeChild(child) 删除的是父节点当中的子元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
var li = document.createElement('li');
btn.onclick = function() {
ul.removeChild(ul.children[0]);
if (ul.children.length == 0) {
this.disabled = true;
}
ul.appendChild(li);
}
// node.cloneNode() 复制节点()默认参数为false 浅拷贝只克隆节点本身，不克隆里面的子节点
//参数为true时， 深拷贝克隆节点本身以及里面的子节点
var buu = document.querySelector('.buu');
buu.onclick = function() {
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
}
</script>
</body>
</html>
发布留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 50px;
}
li {
background-color: pink;
width: 300px;
}
textarea {
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<textarea class="nav"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 获取元素
var texts = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
if (texts.value == '') {
alert('请输入内容!');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = texts.value;
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>
</html>
删除留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 50px;
}
li {
background-color: pink;
width: 300px;
}
textarea {
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<textarea class="nav"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 获取元素
var texts = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
if (texts.value == '') {
alert('请输入内容!');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = texts.value + "<a href='javascript:;'>删除</a>";
ul.insertBefore(li, ul.children[0]);
}
var as = document.querySelector('a');
as.onclick = function() {
// this指的是当前的标签a 我们要删除的是整个li,li是当前a的父节点
ul.removeChild(this.parentNode);
}
}
</script>
</body>
</html>