目录
节点概述
一个网页页面中的所有内容都是节点(标签,属性,文本,注释等等),在DOM中,节点使用node来表示。
节点的基本属性
一般节点至少拥有:
node Tyoe(节点类型)
nodeName(节点名称)
nedeValue(节点值)
node Tyoe(节点类型)
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3
<div>div</div>
<a href="javascript:;"></a>
<script>
var html = document.documentElement;//获取html元素节点
var ele = document.querySelector('div');//获取div元素节点
console.log(html.nodeType); // 1
console.log(ele.nodeType); // 1
console.log(ele.nodeName); // DIV
console.log(ele.nodeValue); // null
</script>
在开发中,常用的操作还是操作元素节点。
利用节点的子父兄关系,可以灵活的获取到元素。
节点的应用:节点层级
利用 DOM树可以把节点划分为不同层级关系,常用的是父子兄层级关系。
获取父节点元素
node.parentNode
此属性返回某节点中的父节点,注意是最近的一个父节点。
如果指定节点无父节点,则返回null。
<div id="father">
fatherDiv
<div id="son">sonDiv</div>
</div>
<script>
var son = document.querySelector('#son');
console.log(son.parentNode); //div#father
</script>
获取子节点元素
方式1:标准获取—parentNode.childNodes
获取所有子节点(包括文本节点),返回的类型为伪数组。
<ul>
<li>节点</li>
<li>测试</li>
</ul>
<script>
var ul = document.querySelector('ul');
console.log(ul.childNodes[0]); //#text --此为ul的第一个子节点(换行)
console.log(ul.childNodes[0].nodeType);//3
console.log(ul.childNodes[1]);//li
console.log(ul.childNodes[2]);//#text
console.log(ul.childNodes[3]);//li
console.log(ul.childNodes[4]);//#text
console.log(ul.childNodes[5]);//undefined
</script>
此方式返回值里面包含了所有子节点,包括元素节点和文本节点等。
因此需要专门处理才可以操作元素节点,不太方便,所以不提倡使用此方式。
方式2:非标准获取–parentNode.children(常用)
此方式是一个只读属性,返回所有的子元素节点,其他节点不返回。
<ul>
<li>节点</li>
<li>测试</li>
</ul>
<script>
var ul = document.querySelector('ul');
console.log(ul.children[0]);//li
console.log(ul.children[1]);//li
console.log(ul.children[2]);//undefined
</script>
获取首尾子节点元素
方式1(此方式获取到所有节点,包括文本等节点,故不常用)
获取子节点的第一个节点:parentNode.firstChild
获取子节点的最后一个节点:parentNode.lastChild
由于返回所有节点,所有两者输出为#text,获取不到元素节点。
方式2(常用方式)
此方式获取到的只有元素节点。
parentNode.firstElementChild
parentNode.lastElementChild
获取兄弟节点元素
方式1(此方式获取到所有节点,包括文本等节点,故不常用)
node.nexSibling:获取下一个兄弟节点
node.previousSibling:获取上一个兄弟节点
方式2(常用方式)
node.nextElementSibling :获取下一个兄弟元素节点
node.prebiousElementSibling:获取上一个兄弟元素节点
节点使用案例:简单新浪下拉菜单
案例需求:触碰菜单栏,显示出菜单栏内容(使用节点操作)。
核心js代码
<script>
var ful = document.querySelector('.ful');
var lis = ful.children;//获取ful下面的所有小li(4个)
for(var i = 0 ; i < lis.length ; i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block';//zul显示
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none';//zul隐藏
}
}
</script>
html代码
<ul class="ful">
<li>
<a href="#" >微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
css代码
<style>
a{
color: black;
font-size: 20px;
align-content: center;
margin: 0 auto;
display: block;
text-align: center;
border: solid salmon;
text-decoration: none;
}
.ful{
list-style: none;
overflow: hidden;
}
.ful>li{
float: left;
width: 50px;
height: 150px;
}
.zul{
list-style: none;
margin-top: 5px;
display: none;
}
.zul>li{
border: solid rgb(43, 223, 239);
margin-left: -35px;
height: 30px;
}
.ful>li>a:hover{
background-color: bisque;
}
.zul>li>:hover{
background-color: bisque;
}
</style>
节点操作
动态创建元素节点
document.createelement(‘tagName’) —tagName:标签名称
此方法由tagName指定的HTML中的标签元素,这些元素开始时不存在,在我们触发某操作后,动态生成。例如:点击按钮生成一个<li>标签等…
var li = document.createElement(‘li’)//创建元素节点”li“—具体使用看如下:
动态添加元素节点
在上面,我们动态的创建了元素节点,但是只是创建,在页面上也看不到。
则:我们需要添加这个动态节点到指定位置。
添加方式
node.appendChild(child)
此方法将一个节点添加到指定父节点的子节点列表的末尾。
node.insertBefore(child,指定元素)
此方法将一个节点添加到父节点的指定子节点前面。
创建和添加元素节点演示:
<ul></ul>
<script>
var ul = document.querySelector('ul');//获取ul元素节点
var li = document.createElement('li')//创建元素节点li
var a = document.createElement('a')//创建元素节点a
console.log(ul.children.length);//输出ul内子节点长度:0 当前无元素
ul.appendChild(li);//添加li元素节点
console.log(ul.children.length);//输出长度为:1
ul.insertBefore(a,li)//在节点li前面添加
console.log(ul.children.length);//输出长度为:2
</script>
浏览器检查元素结构:(发现动态创建和添加了元素节点)
动态删除节点
node.removeChild(‘需要删除的节点’)
—下方案例中有使用—
案例使用:留言功能(动态创建节点)
案例说明:点击提交按钮,下方出现一条记录,
清空文本框内容,点击删除,删除节点。
删除功能:
JS核心代码
<script>
//获取元素
var textarea = document.querySelector('#liuyan');
var but = document.querySelector('#button');
var ul = document.querySelector('ul');
//绑定事件
but.onclick = function(){
//判断文本输入框是否为空
if(textarea.value == ''){
alert('您输入的内容为空');
}else{
//创建元素
var li = document.createElement('li');
//向创建的节点元素中添加内容
li.innerHTML = textarea.value + "<a href = 'javascript:;'>删除</a>";
//添加元素
//往后添加
// ul.append(li);
//往前添加
ul.insertBefore(li,ul.children[0])
textarea.value = '';//添加记录后清空文本框
//添加删除功能
var as = document.querySelectorAll('a');
for(var i = 0 ; i < as.length; i++){
as[i].onclick = function(){
ul.removeChild(this.parentNode);
}
}
}
}
</script>
html代码
<textarea name="liuyan" id="liuyan" cols="25" rows="5"></textarea>
<input id="button" type="button" value="提交">
<ul>
</ul>
css代码
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#liuyan{
margin-top: 10px;
margin-left: 30px;
padding: 5px;
}
ul{
margin-left: 30px;
width: 180px;
}
ul li{
background-color: salmon;
margin: 2px;
/* width: 20px; */
}
li{
list-style: none;
}
li a{
text-decoration: none;
float: right;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/154576.html