JSAP103
1、节点
1）定义：不是元素，节点是页面中的所有内容（标签，属性，文本）,Node。它使得任何标签中的元素获取都十分方便
2）节点的相关属性
可以使用标签即元素点出来，可以使用属性节点点出来，也可以通过文本节点点出来
nodeType:
1:标签
2：属性
3：文本
nodeName:节点的名字
1：标签节点:大写的标签名字
2：属性节点：小写的属性名字
3：文本节点：#text
nodeValue:节点的值
标签节点：null
属性节点：属性值
文本节点：文本内容3）获取相关的父级节点和父级元素
只有标签才能作为父节点，属性和文本不存在嵌套关系
对象名.parentNode
对象名.parentElement
获取属性
.nodeName
等
2）寻找子节点,注意节点包括换行和空格等
.childNodes
寻找子元素
children
试判断div中子节点和子元素的个数
子节点：
一对标签算一个节点，同时标签后的空白与换行(text 也算一个节点，共7个
子元素：仅指标签，共3个
//遍历获取子节点
for(var i=0;i<dvObj.childNodes.length;i++){
var node=dvObj,childNodes[i];
}对象名.getAttributeNode(“属性名”);
将获得属性节点的三个属性
3）
第一个子节点：
.firstChild
第一个子元素：
.firstElementChild
最后一个子节点（在ie8中是第一个子元素）：
.lastChild
最后一个子元素(ie8不支持)：
.lastElementChild
某个元素的前一个兄弟节点（在ie8中是第一个子元素，下同）：
previouSibling
某个元素的前一个兄弟元素（ie8不支持，下同 ）：
previouElementSibling
某个元素的后一个兄弟元素：
.nextSibling
某个元素的后一个兄弟节点：
.nextElementSibling
前两个所有浏览器都支持但对于后面的，关于节点的变成关于元素的，原本关于元素的不支持。
凡是获取节点的代码，在谷歌与火狐中，得到的都是相关的节点；凡是获取元素的代码在谷歌和火狐得到的都是相关的元素；从子节点和兄弟节点开始，凡是获取节点的代码在ie8中得到的是元素；获取元素的相关代码，在ie8中得到的是undefined,即不支持
//案例：通过节点操作元素的背景颜色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 650px;
border: 1px red dotted;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn">
<div id="dv">
<span>span1</span>
<p>p1</p>
<span>span2</span>
<p>p2</p>
<span>span3</span>
<p>p3</p>
<a href="http://www.;baidu.com"></a>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//注册点击事件
my$("btn").onclick = function () {
//获取div
var dvObj = my$("dv");
//获取里面所有子节点
var nodes = dvObj.childNodes;
//循环遍历，判断是不是P标签
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
}
</script>
</body>案例：隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<ul id="uu">
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
<li>你好吗</li>
</ul>
<script>
//隔行变色
function my$(id) {
return document.getElementById(id);
};
var count = 0;//记录有多少li
//获取ul中所有的子节点
var nodes = my$("uu").childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
nodes[i].style.backgroundColor = count % 2 == 0 ? "red" : "blue";
count++;
}
}
</script>
</body>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）第一种元素创建方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
你好
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
document.write("<p>早餐是鳗鱼饭</p>");
};
// document.write(）创建元素，如果是在页面加载完毕后，此时通过这种方式创建元素，页面中的所有内容
//都会被重写而被代替。如果是在页面未加载完成时执行，则不会出现以上情况
</script>
</body>第二种方式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 400px;
border: 1px dashed red;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
你好
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
//点击按钮，在div中创建一个p标签
my$("btn").onclick = function () {
my$("dv").innerHTML="<p>早餐是三明治</p>";
}
</script>
</body>不建议body使用innerHTML属性，因为这样同样会使得body内元素被重写
第三种方式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
length: 400px;
border: 1px red dashed;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id)
}
//创建元素
//把元素追加到父元素中
//点击按钮，在div中创建一个p
my$("btn").onclick = function () {
//创建元素,该方法返回一个对象
var pObj = document.createElement("p");
//把创建后的子元素追加到父元素中
my$("dv").appendChild(pObj);//可多次追加
};
</script>
</body>双引号内如果是字符串则使用单引号，是变量就要用双引号。
通过innerHTML插入图片：
//案例：动态创建列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 400px;
background-color: aqua;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv">
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
var names = ["鹿目圆", "美树沙耶加", "巴麻美", "佐仓杏子", "晓美焰"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应数目的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
}
</script>
</body>document.write可以嵌入外部的代码内容
案例：动态创建列表2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id)
}
function mouseoverHandle() {
this.style.backgroundColor = "yellow";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
var qishu = ["浩气四塞", "借物代形", "八方归元", "祭偶灭灵", "残月锁漪"];
//点击按钮动态地创建列表，把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态地创建li，加到ul中
for (var i = 0; i < qishu.length; i++) {
var liObj = document.createElement("li");
//设置li中的文字内容
liObj.innerText = qishu[i];
ulObj.appendChild(liObj);
//高亮显示
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
}
</script>
</body>案例：点击按钮创建表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border: 1px dashed red;
table, tr, td {
border: 1px;
}
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id)
}
//点击按钮常见表格
my$("btn").onclick = function () {
}
var arr = [
{name: "挞拔玉儿", href: "#"},//第一个元素
{name: "于小雪", href: "#"},
{name: "独孤宁可", href: "#"},
{name: "陈靖仇", href: "#"},
{name: "何然", href: "#"}];
//点击按钮创建表格
my$("btn").onclick = function () {
//创建table加入到div中
var tabObj = document.createElement("table");
my$("dv").appendChild(tabObj);
//创建行,把行加入到table中
for (var i = 0; i < arr.length; i++) {
var dt = arr[i];//每个对象
var trObj = document.createElement("tr")
tabObj.appendChild(trObj);
//创建第一个单元格,加入行中
var td1 = document.createElement("td");
td1.innerText = dt.name;
trObj.appendChild(td1);
//创建第二个单元格
var td2 = document.createElement("td");
td2.innerHTML = "<a href=" + dt.href + ">" + dt.name + "</a>";
trObj.appendChild(td2);
}
}
;
</script>
</body>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
