006 DOM节点操作与元素的创建
一：节点
1.节本基本概念
节点主要有标签，属性，文本【包括文字，空格，换行，回车】。
2.节点的属性
可以使用标签，元素点出来
可以使用标签，点出来
可以使用文本，点出来
nodeType：1--标签，2--属性，3----文本
nodeName：节点名字，标签节点---大写的标签名字，属性节点--小写的属性名字，文本节点--#text
nodeValue：节点的值，标签节点---null，属性节点----属性值，文本节点---文本内容
3.父节点与父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="di">
<soan>这个是一个span</soan>
<p>这个是一个p</p>
<ul id="uu">
<li>111</li>
<li>222</li>
</ul>
</div>
<script>
var uu = document.getElementById("uu");
//找父节点
console.log(uu.parentNode);
//找父元素
console.log(uu.parentElement);
</script>
</body>
</html>
效果:
4.标签节点的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="di">
<soan>这个是一个span</soan>
<p>这个是一个p</p>
<ul id="uu">
<li>111</li>
<li>222</li>
</ul>
</div>
<script>
var uu = document.getElementById("uu");
//标签
console.log(uu.parentNode.nodeType); //1
console.log(uu.parentNode.nodeName); //
console.log(uu.parentNode.nodeValue);
</script>
</body>
</html>
效果：
5.子节点与子元素
子节点更多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="di">
<soan>这个是一个span</soan>
<p>这个是一个p</p>
<ul id="uu">
<li>111</li>
<li>222</li>
</ul>
</div>
<script>
var uu = document.getElementById("uu");
//子节点
console.log(uu.childNodes);
//子元素
console.log(uu.children);
</script>
</body>
</html>
效果：
6.属性节点的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="di">
<soan>这个是一个span</soan>
<p>这个是一个p</p>
<ul id="uu" class="good">
<li>111</li>
<li>222</li>
</ul>
</div>
<script>
var uu = document.getElementById("uu");
var node = uu.getAttributeNode("class");
console.log(node.nodeType);
console.log(node.nodeName);
console.log(node.nodeValue);
</script>
</body>
</html>
效果：
7.12行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="di">
<span>这个是一个span</span>
<p>这个是一个p</p>
<ul id="uu" class="good">
<li>111</li>
<li>222</li>
<li id="current">333</li>
<li>444</li>
</ul>
</div>
<script>
var di = document.getElementById("di");
//第一个字节点
console.log(di.firstChild);
//第一个子元素
console.log(di.firstElementChild);
//最后一个子节点
console.log(di.lastChild);
//最后一个子元素
console.log(di.lastElementChild);
//摸一个元素的前一个兄弟节点
console.log(document.getElementById("current").previousSibling);
//摸一个元素的前一个兄弟元素
console.log(document.getElementById("current").previousElementSibling);
//摸一个元素的后一个兄弟节点
console.log(document.getElementById("current").nextSibling);
//摸一个元素的后一个兄弟元素
console.log(document.getElementById("current").nextElementSibling);
</script>
</body>
</html>
效果：
8.总结
获取节点的代码，在谷歌和火狐得到的都是相关的节点
获取元素的代码在谷歌和火狐的都是相关的元素
从子节点和兄弟节点开始，获取节点的代码在IE8中的得到的是元素，获取元素的代码，在IE8中得到的是undefined，元素的代码，IE中不支持。
二：案例
1.点击按钮，让div下的p变色
遍历出所有的节点，然后节点的类型是1，名称是大写的P即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn">
<div id="div">
<span>这是一个span</span>
<a href="#">百度</a>
<p>段落</p>
<span>这是一个span</span>
<p>段落</p>
</div>
<script>
document.getElementById("btn").onclick=function () {
var div = document.getElementById("div");
var nodes=div.childNodes;
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType==1 && nodes[i].nodeName=="P"){
nodes[i].style.backgroundColor='yellow';
}
}
}
</script>
</body>
</html>
效果：
2.兼容代码【获取第一个子元素】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// firstElementChild：谷歌与火狐都可以得到第一个元素，但是IE不行，只能使用其支持的firstChild。
// 关于firstChild，IE是获取元素，不想是谷歌与火狐一样得到的是节点。IE只支持firstChild。 //获取第一个子元素
function getFirstEleChildByParentEle(parentEle) {
if(parentEle.firstElementChild){
//支持，这种是谷歌与火狐得到第一个元素
return parentEle.firstElementChild;
}else{
//不支持，所以需要IE8使用别的函数
var node = parentEle.firstChild;
while(node && node.nodeType!=1){
node=node.nextSibling;
}
}
}
</script>
</body>
</html>
3.全选与全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
</tbody>
</table>
<script>
var all = document.getElementById("j_cbAll");
var cks = document.getElementById("j_tb").getElementsByTagName("input");
//点击全选的状态，获取其状态，然后根据本状态设置tbody中的所有复选框的状态
all.onclick=function () {
for(var i=0;i<cks.length;i++){
cks[i].checked=this.checked;
}
}
//根据下面选中的，决定上面是否选中
//给下面的添加点击事件
for(var j=0;j<cks.length;j++){
cks[j].onclick=function () {
var flag=true;
for(var k=0;k<cks.length;k++){
if(!cks[k].checked){
flag=false;
break;
}
}
all.checked=flag;
}
}
</script>
</div>
</body>
</html>
效果：
三：元素的创建
1.说明
为了提高用户体验
创建方式有三种：
document.write()
对象.innerHTML=""
document.createElement("标签的名字")
2.第一种方式
这种方式，会将原本的东西都给清除掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="单击" id="btn">
<script>
document.getElementById("btn").onclick=function () {
document.write("<p>这是一个段落</p>")
}
</script>
</body>
</html>
效果：
3.第三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="单击" id="btn">
<div id="di"></div>
<script>
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
} document.getElementById("btn").onclick=function () {
var pObj = document.createElement("p"); // 返回p对象
setInnnerText(pObj,"这是一个p");
document.getElementById("di").appendChild(pObj);//追加
}
</script>
</body>
</html>
四：元素的相关方法
1.在前面插入元素
appendChild这个方式是追加到后面的意思。
要是在某个元素之前，可以使用insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="单击" id="btn">
<div id="di"></div>
<script>
var i=0;
document.getElementById("btn").onclick=function () {
i++;
var pObj = document.createElement("p"); // 返回p对象
pObj.innerText="哈哈哈"+i;
document.getElementById("di").appendChild(pObj);//追加
}
</script>
</body>
</html>
效果：
插入前面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="单击" id="btn">
<div id="di"></div>
<script>
var i=0;
document.getElementById("btn").onclick=function () {
i++;
var pObj = document.createElement("p"); // 返回p对象
pObj.innerText="哈哈哈"+i;
document.getElementById("di").insertBefore(pObj,document.getElementById("di").firstElementChild);//追加
}
</script>
</body>
</html>
效果：
2.移除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="单击" id="btn">
<div id="di"></div>
<input type="button" value="单击" id="btn2">
<script>
//添加元素
var i=0;
document.getElementById("btn").onclick=function () {
i++;
var pObj = document.createElement("p"); // 返回p对象
pObj.innerText="哈哈哈"+i;
document.getElementById("di").insertBefore(pObj,document.getElementById("di").firstElementChild);//追加
}
//
document.getElementById("btn2").onclick=function () {
//移除第一个元素
document.getElementById("di").removeChild(document.getElementById("di").firstElementChild);
}
</script>
</body>
</html>
3.删除所有的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="单击" id="btn">
<div id="di"></div>
<input type="button" value="单击" id="btn2">
<script>
//添加元素
var i=0;
document.getElementById("btn").onclick=function () {
i++;
var pObj = document.createElement("p"); // 返回p对象
pObj.innerText="哈哈哈"+i;
document.getElementById("di").insertBefore(pObj,document.getElementById("di").firstElementChild);//追加
}
//
document.getElementById("btn2").onclick=function () {
while(document.getElementById("di").firstElementChild){
document.getElementById("di").removeChild(document.getElementById("di").firstElementChild);
} }
</script>
</body>
</html>
4.绑定多个事件
addEventListener函数，火狐与谷歌支持，但是IE8不支持。里面有三个参数
第一个：事件类型，不加on，字符串类型
第二个：事件处理的函数
第三个：布尔类型，写false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="单击" id="btn">
<script>
document.getElementById("btn").addEventListener("click",function () {
console.log("999");
},false)
document.getElementById("btn").addEventListener("click",function () {
console.log("999");
},false)
document.getElementById("btn").addEventListener("click",function () {
console.log("999");
},false)
</script>
</body>
</html>
效果：
attachEvent函数，谷歌与火狐不支持，有两个参数，
第一个是事件，需要加on
第二个是函数
程序不写了
5.兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
</script>
</body>
</html>
006 DOM节点操作与元素的创建的更多相关文章
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
- javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
- js的DOM节点操作：创建 ，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- 第6章 DOM节点操作
一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
随机推荐
- [openssl] 使用openssl生成证书
使用openssl生成带域名的证书,SAN,subjectAltName, subject alternative name, DNS. 1. 生成私钥 openssl genrsa - 2. 编写配 ...
- 浅谈OpenStack与虚拟机的区别与联系
很多不太明白OpenStack与虚拟机之间的区别,下面以KVM为例,给大家讲一下他们的区别和联系 OpenStack:开源管理项目OpenStack是一个旨在为公共及私有云的建设与管理提供软件的开源项 ...
- python 字符串操作list[::-1]的几种用法
1.list[-1],此时只有一个参数,作用是通过下标访问数据,-1是倒数第一个. 2.list[:-1],作用是返回从start_index = 0到end_index = -1的一串数据这里的li ...
- iptables常用命令二之如何删除nat规则
删除iptables nat 规则 删除FORWARD 规则: iptables -nL FORWARD --line-number iptables -D FORWARD 1 删除一条nat 规则 ...
- 为何基于tcp协议的通信比基于udp协议的通信更可靠？
tcp协议一定是先建好双向链接,发一个数据包要得到确认才算发送完成,没有收到就一直给你重发:udp协议没有链接存在,udp直接丢数据,不管你有没有收到. TCP的可靠保证,是它的三次握手双向机制,这一 ...
- 使用unsafe.Pointer将结构体转为[]byte
package main import ( "fmt" "unsafe" ) type TestStructTobytes struct { data int6 ...
- 在CentOS7上面搭建GitLab服务器
首先要在CentOS系统上面安装所需的依赖:ssh.防火墙.postfix(用于邮件通知).wegt,以下这些命令也会打开系统防火墙中的HTTP和SSH端口访问. 1.安装SSH协议 安装命令:sud ...
- TCPDUMP抓包学习
一.抓包基础 1.抓网卡ens33 的包,有多大抓多大,然后保存到a.cap中 [root@localhost ~]# tcpdump -i ens33 -s -w a.cap tcpdump: li ...
- 数码管动态显示——74HC04
1.电路设计: p0实现段选,p2实现位选,74hc04是反相器,有反向和放大的双重作用. 2.程序设计: #include<reg52.h> code unsigned char sev ...
- Linux学习建议[转]
端正学习态度学linux不会为了当黑客或者骇客,如果你为了当黑客或骇客而学习Linux,那么你离进监狱不远了,只是时间早晚而已.很多小白都知道“黑客攻击工具”很多来源与Linux平台上的,我也曾指导过 ...