Android 程序员搞 web 之 webApi （十 二）
一、节点
1、概念
文档：document；
元素：页面内所有的标签，元素----element；
节点：页面中所有的内容（标签、属性、文本），Node。
通过节点获取页面内的所有标签都十分方便；
2、节点属性
可以使用标签—元素进行直接调用，也可以使用属性节点直接调用，还可以使用文本节点直接调用。
分别为 :
nodeType (节点类型) 标签 、属性、文本 ，
nodeName （节点名字）大写标签名、小写标签属性、#text，
nodeValues （节点值）null、属性值、文本内容
3、通过子级节点获取父级节点和父级元素
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span 标签</span>
<ul id="uu">
<li>这是 li 1</li>
<li>这是 li 2</li>
<li>这是 li 3</li>
<li>这是 li 4</li>
<li>这是 li 5</li>
<li>这是 li 6</li>
</ul>
</div>
<script src="JsDemoOne.js"></script>
<script>
var ulObj = getView$("uu");
// 获取父级节点
console.log(ulObj.parentNode);
// 获取父级元素
console.log(ulObj.parentElement);
</script>
</body>
4、获取父级标签的属性、标签名字、标签值
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span 标签</span>
<ul id="uu">
<li>这是 li 1</li>
<li>这是 li 2</li>
<li>这是 li 3</li>
<li>这是 li 4</li>
<li>这是 li 5</li>
<li>这是 li 6</li>
</ul>
</div>
<script src="JsDemoOne.js"></script>
<script>
var ulObj = getView$("uu");
// 获取父级节点
console.log(ulObj.parentNode.nodeType);
console.log(ulObj.parentNode.nodeName);
console.log(ulObj.parentNode.nodeValue);
</script>
</body>
5、通过父级节点获取子级节点
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span 标签</span>
<ul id="uu">
<li>这是 li 1</li>
<li>这是 li 2</li>
<li>这是 li 3</li>
<li>这是 li 4</li>
<li>这是 li 5</li>
<li>这是 li 6</li>
</ul>
</div>
<script src="JsDemoOne.js"></script>
<script>
var ulObj = getView$("uu");
// 获取子级节点
console.log(ulObj.childNodes);
//获取子级元素
console.log(ulObj.childElementCount);
</script>
</body>
6、通过 id 获取属性的节点
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span 标签</span>
<ul id="uu">
<li>这是 li 1</li>
<li>这是 li 2</li>
<li>这是 li 3</li>
<li>这是 li 4</li>
<li>这是 li 5</li>
<li>这是 li 6</li>
</ul>
</div>
<script src="JsDemoOne.js"></script>
<script>
var ulObj = getView$("uu");
// 获取子级节点
var node = ulObj.getAttributeNode("id");
console.log(node);
//获取节点的相关数据
console.log(node.nodeType + " ----- " + node.nodeName + " ----- " + node.nodeValue)
</script>
</body>
7、关于节点和元素的其他问题
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span 标签</span>
<ul id="uu">
<li>这是 li 1</li>
孙悟空
<li>这是 li 2</li>
貂蝉
<li>这是 li 3</li>
吕布
<li id="ll">这是 li 4</li>
西施
<li>这是 li 5</li>
赵云
<li>这是 li 6</li>
安其拉
</ul>
</div>
<script src="JsDemoOne.js"></script>
<script>
var ulObj = getView$("uu");
//父级元素
console.log((ulObj.parentElement));
//父级节点
console.log((ulObj.parentNode));
//子级元素
console.log((ulObj.children));
//子级节点
console.log((ulObj.childNodes));
// 第一个子级节点
console.log((ulObj.firstChild));
//第一个子级元素
console.log((ulObj.firstElementChild));
// 最后一个子级节点
console.log((ulObj.lastChild));
//最后一个子级元素
console.log((ulObj.lastElementChild));
//上一个兄弟节点
console.log(getView$("ll").previousSibling);
//上一个兄弟元素
console.log(getView$("ll").previousElementSibling);
//下一个兄弟节点
console.log(getView$("ll").nextSibling);
//下一个兄弟元素
console.log(getView$("ll").nextElementSibling);
</script>
</body>
8、通过节点方式变换标签样式
<body>
<div id="dv">
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<span>这是一个 span </span>
<p>这是一个 p 标签</p>
<a>这是一个 a 标签</a>
<a>这是一个 a 标签</a>
<span>这是一个 span </span>
<p>这是一个 p 标签</p>
</div>
<script src="JsDemoOne.js"></script>
<script>
var dvObj = getView$("dv");
var nodes = dvObj.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType === 1 && nodes[i].nodeName === "P") {
nodes[i].style.backgroundColor = "blue";
}
}
</script>
</body>
9、设置背景图片的方法
document.body.style.backgroundImage=“url(”+this.src+")";
二、元素相关
1、js 代码创建元素方式
1)、document .write(“标签的代码及内容”)；
2)、对象.innerHTML=“标签及代码”;
3)、document.createElement(“标签的名字”)；
第一种方式创建标签存在缺陷，如果在页面加载完毕创建标签会将之前的标签覆盖；
第二种方式创建标签，每次创建都会初始化一个标签，导致多个标签覆盖；
第三种方式创建标签，是不断追加的效果；
2、在 div 内动态添加列表
<body>
<input value="创建标签" type="button" id="btn">
<div id="dv">
</div>
<script src="JsDemoOne.js"></script>
<script>
var names = ["孙悟空", "貂蝉", "赵云", "奕星", "凯", "花木兰"];
getView$("btn").onclick = function () {
var ulObj = document.createElement("ul");
getView$("dv").appendChild(ulObj);
for (var i = 0; i < names.length; i++) {
var liObj = document.createElement("li");
liObj.innerHTML = names[i];
ulObj.appendChild(liObj);
liObj.onmouseover = ba1;
liObj.onmouseout = bac2;
}
};
function ba1() {
this.style.backgroundColor = "blue";
}
function bac2() {
this.style.backgroundColor = "";
}
</script>
</body>
直等于 调用函数，函数不应该带有括号。
三、事件
1、绑定事件的区别
1）、addEventListener（）
<body>
<input value="创建标签" type="button" id="btn">
<div id="dv">
</div>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn").addEventListener("click", function () {
}, false);
</script>
</body>
该点击事件 ie8 不支持，其他的浏览器版本都支持；
2）、attachEvent（）
<body>
<input value="创建标签" type="button" id="btn">
<div id="dv">
</div>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn").attachEvent("onclick", function () {
console.log("123")
});
</script>
</body>
该点击事件仅 ie8 — ie 10 使用；
attachEvent 中的 this 指的是 window 对象；
2、解绑事件
1)、对象 . οnclick=null ；
2)、addEventListener 方式 解绑事件
<body>
<input value="创建标签" type="button" id="btn1">
<input value="解除事件" type="button" id="btn2">
<div id="dv">
</div>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn1").addEventListener("click", f1, false);
getView$("btn1").addEventListener("click", f2, false);
function f1() {
console.log("事件一");
}
function f2() {
console.log("事件二");
}
getView$("btn2").onclick = function () {
getView$("btn1").removeEventListener("click", f1, false);
}
</script>
</body>
这种方式解绑事件 必须是命名函数；
3)、attachEvent 方法解除绑定事件
<body>
<input value="创建标签" type="button" id="btn1">
<input value="解除事件" type="button" id="btn2">
<div id="dv">
</div>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn1").attachEvent("onclick", f1, false);
getView$("btn1").attachEvent("onclick", f2, false);
function f1() {
console.log("事件一");
}
function f2() {
console.log("事件二");
}
getView$("btn2").onclick = function () {
getView$("btn1").detachEvent("onclick", f1, false);
}
</script>
</body>
3、事件冒泡
定义：多层嵌套的元素，有层次关系，这些元素注册了相同的事件，如果里面元素的事件出发了，外面的元素该事件也被触发。换句话说就是冲突了，突然想感谢 google 爸爸的事件分发机制。
解决事件冒泡问题：
1)、ie 和 谷歌都支持的方法
window.event.cancelBubble = true;
2)、火狐 和 谷歌都支持的方法
event.stopPropagation();
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
width: 400px;
height: 400px;
background-color: blue;
}
.div2 {
width: 300px;
height: 300px;
background-color: blueviolet;
}
.div3 {
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div id="dv1" class="div1">
<div id="dv2" class="div2">
<div id="dv3" class="div3">
</div>
</div>
</div>
<script src="JsDemoOne.js"></script>
<script>
getView$("dv1").onclick = function () {
console.log("1111111");
};
getView$("dv2").onclick = function () {
console.log("22222222");
};
/**
*
* @param event 事件处理参数对象
*/
getView$("dv3").onclick = function (event) {
// window.event.cancelBubble = true;
event.stopPropagation();
console.log("333333333");
};
</script>
</body>
4、事件的阶段
1)、事件捕获阶段
从外向内
2)、事件目标阶段
最开始选择的那个
3)、
事件冒泡阶段
从里想外
5、一个元素注册多个事件
<body>
<input type="button" id="btn" value="测试多个事件">
<script src="JsDemoOne.js"></script>
<script>
getView$("btn").onclick = f1;
getView$("btn").onmouseover = f1;
getView$("btn").onmouseout = f1;
function f1(event) {
switch (event.type) {
case "click":
alert("点击了");
break;
case "mouseover":
this.style.background = "green";
break;
case "mouseout":
this.style.background = "red";
break
}
}
</script>
</body>
