Android 程序员搞 web 之 webApi （十 三）

Android 程序员搞 web 之 webApi （十 二）

一、节点

1、概念

文档：document；
元素：页面内所有的标签，元素----element；
节点：页面中所有的内容（标签、属性、文本），Node。

通过节点获取页面内的所有标签都十分方便；

2、节点属性

可以使用标签---元素进行直接调用，也可以使用属性节点直接调用，还可以使用文本节点直接调用。
分别为 :
nodeType (节点类型) 标签 、属性、文本 ，
nodeName （节点名字）大写标签名、小写标签属性、#text，
nodeValues （节点值）null、属性值、文本内容

3、通过子级节点获取父级节点和父级元素

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 标签
    

        
这是 li 1
        
这是 li 2
        
这是 li 3
        
这是 li 4
        
这是 li 5
        
这是 li 6
    

获取父级节点和元素

4、获取父级标签的属性、标签名字、标签值

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 标签
    

        
这是 li 1
        
这是 li 2
        
这是 li 3
        
这是 li 4
        
这是 li 5
        
这是 li 6
    

效果

5、通过父级节点获取子级节点

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 标签
    

        
这是 li 1
        
这是 li 2
        
这是 li 3
        
这是 li 4
        
这是 li 5
        
这是 li 6
    

效果

6、通过 id 获取属性的节点

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 标签
    

        
这是 li 1
        
这是 li 2
        
这是 li 3
        
这是 li 4
        
这是 li 5
        
这是 li 6
    

效果

7、关于节点和元素的其他问题

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 标签
    

        
这是 li 1
        孙悟空
        
这是 li 2
        貂蝉
        
这是 li 3
        吕布
        
这是 li 4
        西施
        
这是 li 5
        赵云
        
这是 li 6
        安其拉
    

效果

8、通过节点方式变换标签样式

    
这是一个 p 标签
    这是一个 a 标签
    这是一个 span 
    
这是一个 p 标签
    这是一个 a 标签
    这是一个 a 标签
    这是一个 span 
    
这是一个 p 标签

效果

9、设置背景图片的方法

document.body.style.backgroundImage="url("+this.src+")";

二、元素相关

1、js 代码创建元素方式

1)、document .write("标签的代码及内容")；
2)、对象.innerHTML=“标签及代码”;
3)、document.createElement("标签的名字")；

第一种方式创建标签存在缺陷，如果在页面加载完毕创建标签会将之前的标签覆盖；
第二种方式创建标签，每次创建都会初始化一个标签，导致多个标签覆盖；
第三种方式创建标签，是不断追加的效果；

2、在 div 内动态添加列表

效果

直等于 调用函数，函数不应该带有括号。

三、事件

1、绑定事件的区别

1）、addEventListener（）

该点击事件 ie8 不支持，其他的浏览器版本都支持；

2）、attachEvent（）

该点击事件仅 ie8 --- ie 10 使用；
attachEvent 中的 this 指的是 window 对象；

2、解绑事件

1)、对象 . onclick=null ；
2)、addEventListener 方式 解绑事件

这种方式解绑事件 必须是命名函数；
3)、attachEvent 方法解除绑定事件

3、事件冒泡

定义：多层嵌套的元素，有层次关系，这些元素注册了相同的事件，如果里面元素的事件出发了，外面的元素该事件也被触发。换句话说就是冲突了，突然想感谢 google 爸爸的事件分发机制。

解决事件冒泡问题：

1)、ie 和 谷歌都支持的方法

window.event.cancelBubble = true;

2)、火狐 和 谷歌都支持的方法

event.stopPropagation();

4、事件的阶段

1)、事件捕获阶段

从外向内

2)、事件目标阶段

最开始选择的那个

3)、

事件冒泡阶段
从里想外

5、一个元素注册多个事件