节点操作
获取元素通常使用两种方式
1.利用DOM提供的方案
- document.getElemetByID()
- document.getElemetByTagName()
- document.querySelector等
但是逻辑性不强而且繁琐
2.利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强,但是兼容性稍差
这两种方式都可以获取节点,我们后面都会使用,但是节点才做更加简单.
网页中的所有内容都是节点(标签,属性,文本注释等),在DOM中,节点使用node来表示.
HTML的DOM树中的所有节点均可以通过JavaScript进行访问,所有html元素(节点)均可以被修改,也可以创建或删除.
节点概述
一般的,节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性.
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3 (文本节点包括文字,空格,换行等)
我们在实际开发中,节点操作主要操作的是元素节点
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系:
1.父节点 parentNode
我们以前想要获取list的父亲.box使用document.....的方法一个一个获取,现在我们可以用父节点的方法获取到:
- 但是只能得到它最近的父级节点(亲爸爸)
- 如果指定的节点没有父元素则返回null
2.子节点 parentNode.childNodes (注意's',子节点可以有很多个)
假如我们现在只想要ul里面的li节点,以前我们是分别获取,现在我们可以用子节点来获取
我们现在试试:
但是我们发现会有11个元素
这是因为childNodes包括元素节点,文字节点等等,所以是包括ul的换行的,5个li,6个换行加起来就是11啦.
所以我们可以用另一种方法: parentNode.children(非标准)
parentNode.children是一个只读属性,返回所有的子元素节点.它只返回子元素节点,其余节点不返回(这个是我们重点掌握的),
虽然children是一个非标准的方法,但是得到了各浏览器的支持,因此我们可以放心使用.
我们也可以让他返回第一个子节点和最后一个子节点,但同样也是包括所有的节点:
第一个子节点:
parentNode.firstChild
最后一个节点:
parentNode.lastChild
只返回第一个和最后一个子元素节点的方法:
第一个子元素节点:
firstElementChild
最后一个子元素节点:
lastElementChild
注意:这两个方法都有兼容性问题,IE9以上才支持(IE你真是业界毒瘤啊)
所以最常用的方法还是parentNode.children,选择第几个就parentNode.children[index]就可以了.
做一个新浪的下拉菜单小案例,我自己先做出来啦!
兄弟节点
node.nextSibling返回当前元素的下一个兄弟节点,找不到则返回null,同样,也是包含所有的节点
div的下一个兄弟节点为换行 #text
node.previousSibling 返回当前元素上一个兄弟节点,找不到则返回null,同样也是包含所有的节点.
node.nextElementSibling
nextElementSibling: 返回当前元素下一个兄弟节点,找不到则返回null.
node.previousElementSibling:
previousElementSibling: 返回当前元素上一个兄弟节点,找不到则返回null
但还是有兼容性问题,IE9以上才支持(怒了...)
但是这个没有很好的解决办法,我们只能自己封装一个兼容性函数:
创建节点
document.createElement('tagName')
document.createElement()方法创建由tagName指定的HTML元素.因为这些原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建节点,但是光创建是不够的,元素并不会在页面中显示,因为我们没有告诉他将节点放在哪.
添加节点
node.appendChild(child)
node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾,类似于CSS中的after伪元素,node就是父级节点,child是子级节点.
可以发现li已经被创建到ul中了.
那么如果ul里面原先已经有一个有一个li了呢,会发生什么,让我们来试试:
可以看到新的li是在原先的li的后面的,不过也可以理解,因为append本身就是追加的意思,所以当然是追加后面.
如果想要在元素前面插入新创建的节点,我们可以使用node.insertBefore(child,指定元素) child是我们要插入的元素,指定元素就是指定在哪个元素前面插入.
我们现在做一个留言板的案例:
我决定先自己试一下哈哈哈!
自己做的:
删除节点
node.removeChild(child)
node.removeChild(child)方法从DOM中删除一个子节点,返回删除的子节点.
现在往留言板添加删除留言的功能:
虽然做的效果差不多但还是按着老师的来一次.
新知识:我给a链接写的网页是"#",但是这样我们点击后会出现一个小问题:
阻止网页跳转需要添加JavaScript : void(0);或者JavaScript:;
最后的做法:
最后再学习一个复制节点就结束今天的内容
复制节点
node.cloneNode( )
node.cloneNode()方法返回调用方法的节点的一个副本.也称为克隆节点/拷贝节点
我们来试一下:
但是很奇怪,只把li标签克隆过来了,但是里面的内容却是空的.
注意:
- 如果括号里面的参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点.
- 如果括号里为true,则是深拷贝,即克隆节点也克隆里面的子节点
改成这样才行哦
呼,学了好久,从10点多到下午4点...累的,虽然效率很低,但是学到了很多东西也做了很多案例,一会儿要复习英语还要去做运动...
