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. COOKIE和SESSION有什么区别?

    1,位置--session 在服务器端,cookie 在客户端(浏览器)2,形式--session 默认被存在在服务器的一个文件里(session 可以放在 文件.数据库.或内存中都可以),cooki ...

  2. Ng Alain使用 - cli和克隆两种方式

    感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...

  3. (二)Makefile——自动编译、清理、安装软件

    每次都要敲击冗长的编译命令,每次都要清理之前的编译中间结果和最终结果,在安装软件时复制剪切大量的动态库,在卸载软件时删除很多的动态库和配置文件.好吧,我被逼向了makefile. helloworld ...

  4. img 标签的 usemap 属性

    <img src="1.gif" alt="Planets" usemap="#Map"/> <map name=&quo ...

  5. redis 在 php 中的应用

    一.redis 在 php 中的应用(Key篇) 二.redis 在 php 中的应用(String篇) 三.redis 在 php 中的应用(Hash篇) 四.redis 在 php 中的应用(Li ...

  6. 数仓1.1 分层| ODS& DWD层

    数仓分层 ODS:Operation Data Store原始数据 DWD(数据清洗/DWI) data warehouse detail数据明细详情,去除空值,脏数据,超过极限范围的明细解析具体表 ...

  7. day 49-css补充(终结)[浮动和定位]

    老师的笔记: 前情回顾: day49 混乱即阶梯. 1. 前情回顾 HTML HTTP和HTML 文档机构 <!Doctype html> HTML head <meta> & ...

  8. 李宏毅机器学习笔记3:Classification、Logistic Regression

    李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...

  9. Tomcat v9.0 Could not publish to the server. java.lang.IndexOutOfBoundsException

    今天使用Tomcat启动一个java项目,出现报错: Could not publish to the server. java.lang.IndexOutOfBoundsException 众寻之下 ...

  10. Django项目中使用Redis

    Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...