JSAP103

1、节点

1）定义：不是元素，节点是页面中的所有内容（标签，属性，文本）,Node。它使得任何标签中的元素获取都十分方便

2）节点的相关属性

可以使用标签即元素点出来，可以使用属性节点点出来，也可以通过文本节点点出来nodeType:1:标签2：属性3：文本nodeName:节点的名字1：标签节点:大写的标签名字2：属性节点：小写的属性名字3：文本节点：#textnodeValue:节点的值标签节点：null属性节点：属性值文本节点：文本内容

3）获取相关的父级节点和父级元素

只有标签才能作为父节点，属性和文本不存在嵌套关系

对象名.parentNode

对象名.parentElement

获取属性

.nodeName

等

2）寻找子节点,注意节点包括换行和空格等

.childNodes

寻找子元素

children

试判断div中子节点和子元素的个数

子节点：

一对标签算一个节点，同时标签后的空白与换行(text 也算一个节点，共7个

子元素：仅指标签，共3个

//遍历获取子节点for(var i=0;i

对象名.getAttributeNode(“属性名”);

将获得属性节点的三个属性

3）

第一个子节点：

.firstChild

第一个子元素：

.firstElementChild

最后一个子节点（在ie8中是第一个子元素）：

.lastChild

最后一个子元素(ie8不支持)：

.lastElementChild

某个元素的前一个兄弟节点（在ie8中是第一个子元素，下同）：

previouSibling

某个元素的前一个兄弟元素（ie8不支持，下同 ）：

previouElementSibling

某个元素的后一个兄弟元素：

.nextSibling

某个元素的后一个兄弟节点：

.nextElementSibling

前两个所有浏览器都支持但对于后面的，关于节点的变成关于元素的，原本关于元素的不支持。

凡是获取节点的代码，在谷歌与火狐中，得到的都是相关的节点；凡是获取元素的代码在谷歌和火狐得到的都是相关的元素；从子节点和兄弟节点开始，凡是获取节点的代码在ie8中得到的是元素；获取元素的相关代码，在ie8中得到的是undefined,即不支持

//案例：通过节点操作元素的背景颜色     
            
    
    
     span1    
     
p1
    
     span2    
     
p2
    
     span3    
     
p3
    
     
    

案例：隔行变色    
            
    
    
     
你好吗
    
     
你好吗
    
     
你好吗
    
     
你好吗
    
     
你好吗
    
     
你好吗
    
     
你好吗
    
     
你好吗
    

5、封装节点兼容代码

兼容性问题

获取任意一个父级元素的第一个子级元素：

function getFirstElementChild(element){
    if( element.firstElementChild){
   //undefinded自动转为布尔型return element.firstElementChild;}else{//为了避免有些浏览器中firstChild方法返回的是子节点，需要进行判断var node=element.firstChild;//第一个节点 while(node||node.nodeType!=1){
   //node无意义或该节点不是标签node=node.nextSiling;}return node;}}

获取任意一个父级元素的最后一个子元素

function getLastElementChild(){
    if( element.lastElementChild){
   //undefinded自动转为布尔型return element.lastElementChild;}else{//为了避免有些浏览器中lastChild方法返回的是子节点，需要进行判断var node=element.lastChild;//倒数第一个节点 while(node||node.nodeType!=1){
   //node无意义或该节点不是标签node=node.previouSiling;}return node;}}

//案例切换背景图片

背景图片用url

外面是双引号，里面是变量的时候，变量拼接要用双引号；如果外边是单引号，里面拼接变量也是单引号；

//案例：全选与全不选

最后，ckAll.checked=flag;

6、元素创建的不同方式

1）第一种元素创建方式

    
            你好

第二种方式：

    
            你好
    

不建议body使用innerHTML属性，因为这样同样会使得body内元素被重写

第三种方式：

双引号内如果是字符串则使用单引号，是变量就要用双引号。

通过innerHTML插入图片：

//案例：动态创建列表    
            
    

document.write可以嵌入外部的代码内容

案例：动态创建列表2    
            
    

案例：点击按钮创建表格    
            
    

7、元素相关的操作方法

追加是在后边追加

.insertBefore(newChild,refChild)

在某元素之前追加一个元素。第一个参数是需要追加的元素，第二个参数是参照元素，将在它前面追加

.replaceChild(newChild,refChild)

替换元素，参照的元素将被替换为新的元素

.removeChild(oldChild)

移除父级元素中的某一子级元素

my$("dv").removeChild(my$("dv").firstElementChild);//删除第一个子元素

删除所有子级元素

限制只能创建一个元素

有则删除，无则创建

或

8、为元素绑定事件

1）添加多个事件而不被覆盖

.addEventListener(事件的类型即名字但没有on是字符串类型,事件处理函数可命名可匿名,false)

2）另一种方法（为了兼容ie8）

.attachEvent(type,listener)

type，字符串，事件类型，带有on，谷歌不支持

listener,事件处理函数

3）兼容代码

为任意元素，绑定任意事件

boolean flag=对象名.方法名；//注意没有括号，若该对象存在该方法，返回true