节点一系列操作
【摘要】
父节点操作
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var b...
- 父节点操作
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
- 子节点的操作
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
console.log(ul.children[0]);
console.log(ul.children[1]);
console.log(ul.children[2]);
- 子节点的第一个元素和最后一个元素
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
- 创建和添加节点
想要添加节点，就必须先创建一个节点，之后将结点追加到开头或者结尾就可以了，注意的是追加到结尾的写法，还有就是需要首先将他的父节点获取过来。
<!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>
<ul>
<li>你好</li>
</ul>
</body>
<script>
// 创建元素
var li = document.createElement('li');
// 添加到后面
var ul = document.querySelector('ul') ;
ul.appendChild(li) ;
// 追加到最前面
var lili = document.createElement('li');
ul.insertBefore(lili , ul.children[0]) ;
</script>
</html>
- 简易版发布留言案例
这个的核心就是创建li和追加li，就是上面的具体化一下，还有就是将文本框里面的文字内容添加给li。innnerHTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 注册 + 函数
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容');
} else {
var li = document.createElement('li');
li.innerHTML = text.value ;
// ul.appendChild(li);
ul.insertBefore(li , ul.children[0]) ;
}
}
</script>
</body>
</html>
- 删除留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 注册 + 函数
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容');
} else {
var li = document.createElement('li');
// 在文本域内容去过来的时候，加一个a链接
li.innerHTML = text.value + "<a href = 'javascrip:;'>删除</a>";
// ul.appendChild(li);
ul.insertBefore(li , ul.children[0]) ;
// 删除元素 - 删除的是当前连接的父亲
var as = document.querySelectorAll('a');
// 给每一个小a都要绑定事件
for ( var i = 0 ; i < as.length ; i ++ ) {
as[i].onclick = function () {
ul.removeChild(this.parentNode) ;
}
}
}
}
</script>
</body>
</html>
- 克隆标签
<!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>
<ul>
<li>1</li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul') ;
// 克隆标签 待克隆的.cloneNode(true) ;
var lili = ul.children[0].cloneNode(true);
// 追加到后面
ul.appendChild(lili) ;
</script>
</body>
</html>
文章来源: blog.csdn.net，作者：花花叔叔，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_52077949/article/details/120210465
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）