JavaScript笔记(14)

节点操作

获取元素通常使用两种方式

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标签克隆过来了,但是里面的内容却是空的.

注意:

1. 如果括号里面的参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点.
2. 如果括号里为true,则是深拷贝,即克隆节点也克隆里面的子节点

改成这样才行哦

呼,学了好久,从10点多到下午4点...累的,虽然效率很低,但是学到了很多东西也做了很多案例,一会儿要复习英语还要去做运动...