CSS选择器
CSS3选择器规范地址： [https://www.w3.org/TR/2011/REC-css3-selectors-20110929/](https://www.w3.org/TR/2011/REC-css3-selectors-20110929/)
CSS3选择最新选择器规范: [https://www.w3.org/TR/selectors](https://www.w3.org/TR/selectors )
!---问题---!
1.css的全称是什么？
2.样式表的组成
3.浏览器读取编译css的顺序？
1.基本选择器
/*通配符选择器*/ * { margin: 0; padding: 0; border: none; }
/*元素选择器*/ body { background: #eee; }
/*类选择器*/ .list { list-style: square; }
/*ID选择器*/ #list { width: 500px; margin: 0 auto; }
/*后代选择器*/ .list li { margin-top: 10px; background: #abcdef; }
2.基本选择器扩展
/*子元素选择器*/ #wrap > .inner {color: pink;}
也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}
它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}
它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/ h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符
3.属性选择器
/*存在和值属性选择器*/
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
/*子串值属性选择器*/
[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
4.伪类与伪元素选择器
/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
身上时 :link和:visited不能放在最后！！！
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接：
color
background-color
border-color
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
/*结构性伪类*/
index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！
nth-of-type以元素为中心！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的，有空格都不行，有attr没关系)
/*伪元素*/
::after
::before
::firstLetter
::firstLine
::selection
5.css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：
1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势
注意：id选择器和属性选择器
div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）
重要声明
有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面
标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突，胜出的总是重要声明
继承
继承没有特殊性，甚至连0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重：
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
在按选择器的特殊性排序
最终按顺序
css3媒体查询
css3媒体查询是响应式方案核心
媒体类型
all 所有媒体（默认值）
screen 彩色屏幕
print 打印预览
projection 手持设备
tv 电视
braille 盲文触觉设备
embossed 盲文打印机
speech “听觉”类似的媒体设备
tty 不适用像素的设备
媒体属性
width （可加max min前缀）
height （可加max min前缀）
device-width （可加max min前缀）
device-pixel-ratio（可加max min前缀，需要加webkit前缀）
orientation portrait竖屏
landscape横屏
操作符，关键字 (only,and,(，or),not)
only：
防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.
@media only screen and (min-width:800px ){
规则；
规则
}
@media screen and (min-width:800px ){
规则；
规则
}
在老款的浏览器下
@media only ---> 因为没有only这种设备 规则被忽略
@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
建议在每次抒写media query的时候带上only
and:
连接媒体属性 、连接媒体类型
对于所有的连接选项都要匹配成功才能应用规则
or(,) : 和and相似
对于所有的连接选项只要匹配成功一个就能应用规则
not:取反
CSS预处理器-Less
less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
Less编译工具
koala 官网:www.koala-app.com
less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载
less中的嵌套规则
1.基本嵌套规则
2.&的使用
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量
less运算
在less中可以进行加减乘除的运算
less避免编译
less继承
性能比混合高
灵活度比混合低
bootstrap
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
中文网 ： http://www.bootcss.com/
英文网 : http://getbootstrap.com/
容器
流体布局容器
容器的width为auto，只是两边加了15px的padding。
固定布局
容器的width会随设备分辨率的不同而生产变化
分辨率阈值
w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
1200>w >=992 容器的width为970 左右padding为15 （注意是borderBox）
992 > w >=768 容器的width为750 左右padding为15 （注意是borderBox）
768 > w >=992 容器的width为auto 左右padding为15 （注意是borderBox）
栅格系统
col-lg-x
col-md-x
col-sm-x
col-xs-x
x默认拥有12个等级
列偏移
调整的是margin-left，分13个等级（0到12）
0时为0%
列排序
push的时候调整的是left，分13个等级（0到12）
0时为auto
pull的时候调整的是right，分13个等级（0到12）
0时为auto
响应式工具
容器与栅格盒模型设计的精妙之处
container 提供了一个15px的padding
row 是 column 直接存在的容器，row 默认最多可有12个 column，
同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。
同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin，
为了抵消 container 中15px的 padding
每个column 也会有15px的水平方向的 padding，colunmn 只能在 row 中生存，
由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。
但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，
同时 不同column的内容之间就有了30px的槽
目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽
BOM
ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）
则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，
缺少事实上的规范导致 BOM 有很多问题，因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中
JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。
window对象
BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，
它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问
isNaN()、isFinite()、parseInt()、parseFloat() 等方法。
全局变量与windows对象属性的差别
抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：
全局变量不能通过 delete 运算符删除，而直接在 window 对象上的定义的属性可以
window.open()/close方法
open方法的四个参数：可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
后两个参数有很大的兼容性问题
close() 方法仅适用于通过 window.open() 打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。
定时器
// 不建议传递字符串
setTimeout("console.log('Hello world!') ", 1000);
// 推荐的调用方式
setTimeout(function() {
console.log("Hello world!");
}, 1000);
第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。
JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，
就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中(添加的过程是异步的)。
如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。
navigator对象
location对象
location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；
换句话说，window.location 和 document.location 引用的是同一个对象。
history 对象
DOM IDL
interface description language
c++：
class 派生类名 : 继承方式 基类名
{
派生类的成员
};
继承方式：public、private和protected，默认处理是public。
DOM IDL
DOM的接口定义语言
DOM规范
正如W3C所定义的，DOM是独立于平台和语言的接口，该接口为程序和脚本提供了对文档的内容、
结构和样式的动态获取和更新的功能。
DOM的出现来自对动态页面的需求，先有DOM的实现（Netscape DOM0），再有各个厂商对DOM实现规范的需求，
再有了W3C Activity Statement对于DOM发展的规范，然后才有了我们所说的“DOM”。
DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型(DOM2)
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。
DOM0指的是Necscape3.0和IE3.0提供对于HTML文档功能，实现了包括元素(HTML Element)、表单(Form)、
图像(Image)等的接口和方法。DOM0虽然年代久远，某些实现并不符合新的DOM理念，但为了向后兼容，
很多现代浏览器仍然支持DOM0的某些方法和属性。即便某些方法的实现原理有所不同，但提供了可用性。
DOM0出现后，各厂商意识到DOM的前景，纷纷向W3C建议DOM的规范化。
于是出现了W3C DOM Activity Statement（DOM的活动清单）以及DOM1、DOM2、DOM3规范(Specification)
DOM1 1.0版本发布于1998年10月1日，是第一个DOM规范。DOM1包含两部分:
DOM1 Core：定义了DOM最基本的接口，包括Document，Node，NodeList等等。
DOM1 THML：HTML文档是DOM的一种实现，该规范定义了基于DOM1 Core的HTML文档实现。
DOM2规范在2000年11月13日发布，主要包含6个模块，相比于DOM1，DOM2更加丰富，更加完善，
目前主流浏览器对DOM2有着良好的支持。
DOM2 Core: 相比于DOM1 Core，DOM2丰富了Document，Node等接口的功能，
DOM2 View：View提供的是DOM的表现形式，同一个文档源(document source)，可能有不同的表现形式，
DOM2 View引入了Abstract View和Document View接口。
DOM2 Event：DOM 事件处理系统规范，DOM1中并未对DOM的事件模型进行定义，
在DOM2中规范事件模型(Event Model)主要有两个目的：
1)设计一套通用的事件系统，实现事件处理程序的注册和注销，描述事件的流动(Event Flow)，
事件的上下文信息(Contextual Information )等；
2)提供一套规范子集兼容老版本浏览器DOM0的事件实现。
DOM2 Style：程序和脚本动态地获取和更新DOM的样式，提供包括Style Sheet,
Cascading Style Sheet, CSSRule, CSSStyleDeclaration, getComputedStyle接口。
DOM2 Style的实现基于DOM2 Core和DOM2 View。
DOM2 Traverse and Range：DOM2 Traverse是关于文档节点遍历的规范，
包括Treewalker，NodeIterator和NodeFilter等；
DOM2 Range是关于DOM片段(Document Fragment)操作的规范，譬如DocumentFragment。
DOM2 HTML：在DOM1 HTML的基础上结合DOM2 Core推出了一些新的接口和属性
DOM3首次发布于2004年4月，主要包括Core、Load and Save、Validation、XPath、View and Formatting、
Events和Abstract Schemas7个模块。目前主流浏览器对DOM3的支持比较有限
DOM事件
两种绑定方式
(DOM0)1.obj.onclick = fn;
(DOM2)2.
ie:obj.attachEvent(事件名称，事件函数);
1.没有捕获(非标准的ie 标准的ie底下有 ie6到10)
2.事件名称有on
3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序
4.this指向window
标准:obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象
document.attachEvent('onclick', fn2);
document.attachEvent('onclick', function() {
fn1.call(document);
});
是否捕获 : 默认是false false:冒泡 true：捕获
document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);
注意
ie代表了:非标准ie 和 标准ie
标准代表了:标准ie 和 chrome Firefox等....
同步this
function bind(obj, evname, fn) {
if (obj.addEventListener) {//除ie低版本外都可以进入
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
}
bind(document, 'click', fn1);
两种绑定方式的区别
取消冒泡的手段:event.cancelBubble = true;
event.stopPropagation();
第一种:默认冒泡,
第一种:一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
第二种:
attachEvent
默认冒泡
addEventListener
是否捕获 : 默认是false
第三个参数: false:冒泡
true：捕获
第二种:一个元素上可以绑定多个同类事件,它们都会被执行
事件解绑
DOM0:想解除事件就相当简单了，只需要再注册一次事件，把值设成null
原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，
也就解除了事件绑定。
DOM0事件模型还涉及到直接写在html中的事件:
因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
DOM2:removeEventListener
解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
detachEvent(ie)
事件流
单击蓝色框后，开始事件捕获阶段：
从最外层的document对象（浏览器其实是从window对象开始的）向内捕获事件，路过红色框时，查看到红色框有事件，
但是红色框说：“我是在冒泡阶段执行，现在是捕获阶段，等你回来再说吧。”
接下来是黄色框：“我在捕获阶段执行，就是现在执行！在控制台输“黄色框”吧~~”
接下来到达目标阶段：
“DOM2级事件”规范要求捕获阶段不会涉及事件目标即我们点击的那个最具体的元素，
但IE9、Chrome等浏览器都会在捕获阶段触发事件对象上的事件。执行目标对象的事件函数，控制台输出“蓝色框”。
最后是冒泡阶段：
由目标对象向外传递，到达黄色框，黄色框说：“我在捕获阶段执行过了，你走吧...”
然后到达红色框，红色框说：“你终于回来了，现在就执行我的事件！”控制台输出“红色框”。
然后继续向外传播，直到到达document对象后停止。
其他：更改了元素绑定事件代码的顺序，执行顺序也和上面表现的一致。
总结
onclick形式:冒泡
attachEvent:冒泡
addEventListener:第三个参数(false:冒泡;true:捕获)
DOM细节
DOM
1. 节点及其类型:
1). 元素节点
2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3). 文本节点: 是元素节点的子节点, 其内容为文本.
4). documnet
2. 在 html 文档的什么位置编写 js 代码?
0). 直接在 html 页面中书写代码.
<button id="button" onclick="alert('hello world');">Click Me!</button>
缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦
1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
获取不到指定的节点:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
var cityNode = document.getElementById("city");
//打印结果为 null.
alert(cityNode);
</script>
</head>
<body>
......
2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
var cityNode = document.getElementById("city");
alert(cityNode);
};
</script>
</head>
<body>
......
3. 如何来获取元素节点:
1). **document.getElementById: 根据 id 属性获取对应的单个节点
2). **document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
4). 其它的两个方法, ie 根本就不支持, 所以不建议使用
document.getElementsByClassName();
document.getElementsByTagNameNS();
4. 获取属性节点:
1). **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2). **可以直接通过getAttribute/setAttribute/removeAttribute
这样的方式来获取和设置属性节点的值
3). 通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值
5. 获取元素节点的子节点(**只有元素节点才有子节点!!):
1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点
获取指定节点的所有子节点.一共有三种方式:
childNodes属性:
不实用,会取到文本节点
children属性:
实用,会剔除文本节点
用该指定节点的getElementsByTagName方法(注意不是document):
不实用,虽然会剔除文本节点,但只能取一组相同tagNaem的子节点,无法取全
使用firstChild,lastChild来取一个指定元素节点的第一个和最后一个子节点时
1.会受到文本子节点的影响
2.我们通常可以使用firstChild的nodeValue属性来获取文本值(当子节点只有文本节点时)
6. 获取文本节点:
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
7. 节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性.
**如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容
8. 创建一个元素节点:
1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
**新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
9. 创建一个文本节点:
1). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
10. 为元素节点添加子节点:
1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
11. 节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
if(aNode == bNode){
return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
var bParentNode = bNode.parentNode;
//若 bNode 有父节点
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}
}
12. 插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
2). 自定义 insertAfter() 方法
/**
* 将 newChild 插入到 refChild 的后边
* @param {Object} newChild
* @param {Object} refChild
*/
function insertAfter(newChild, refChild){
var refParentNode = refChild.parentNode;
//判断 refChild 是否存在父节点
if(refParentNode){
//判断 refChild 节点是否为其父节点的最后一个子节点
if(refChild == refParentNode.lastChild){
refParentNode.appendChild(newChild);
}else{
refParentNode.insertBefore(newChild, refChild.nextSibling);
}
}
}
13. 删除节点:
1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
14. innerHTML属性:
1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
15. 其它属性, 参看 API: nsextSibling, previousSibling 等
版权声明：本文为AnalogElectronic原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。