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

JSAP103的更多相关文章

随机推荐

  1. kickstart-G

    感觉自己很蠢,large数据只能交一次,忘记这回事了 A题 O(n^2)解法,用vector<set> 缓存j后面的数据,减少一重循环 #include <string> #i ...

  2. reconnecting-websocket.js

    websocket是HTML5下一个不错的网络协议解决方案,有一个场景很多猿猿都会遇到,手机锁屏后大约60秒,IOS会自动断开websocket连接,连接丢失了,那我们的数据也就断了.websocke ...

  3. 【NOI2017】泳池

    题解: 满分的笛卡尔树以后再学吧.. 40分还是比较好想的 但是状态挺复杂的 直接贴代码了 代码: #include <bits/stdc++.h> using namespace std ...

  4. Flink--time-window 的高级用法

    1.现实世界中的时间是不一致的,在 flink 中被划分为事件时间,提取时间,处理时间三种. 2.如果以 EventTime 为基准来定义时间窗口那将形成 EventTimeWindow,要求消息本身 ...

  5. BZOJ1096 [ZJOI2007]仓库建设 动态规划 斜率优化

    原文链接http://www.cnblogs.com/zhouzhendong/p/8696410.html 题目传送门 - BZOJ1096 题意 给定两个序列$a,b,X$,现在划分$a$序列. ...

  6. laravel启动过程简单解析

    :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:3px ...

  7. Zookeeper的概述、安装部署及选举机制

    一.Zookeeper概述 1.Zookeeper是Hadoop生态的管理者,它致力于开发和维护开源服务器,实现高度可靠的分布式协调. 2.Zookeeper的两大功能: (1)存储数据 (2)监听 ...

  8. 一、网络编程-UDP传输协议及socket套接字使用

    知识点基本介绍:1.网络通信协议一般就是UDP和TCP俩种传输协议,这一章先说UDP,UDP是一种比较简单的传输协议,如qq使用的就是UDP          2.ip:ip就是标记网络中中的一台电脑 ...

  9. Java内存空间的分配及回收

    Java中内存分为: 栈:存放简单数据类型变量(值和变量名都存在栈中),存放引用数据类型的变量名以及它所指向的实例的首地址. 堆:存放引用数据类型的实例. Java的垃圾回收 由一个后台线程gc进行垃 ...

  10. Java并发编程(十三)-- 线程池

    什么是线程池? 线程池就是以一个或多个线程循环执行多个应用逻辑的线程集合. 为什么用线程池? 创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处理效率 例如: 记创建线程消耗时 ...