类操作className
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
// console.log(1);
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名
// topBanner.style.display = "none";
}
解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
DOM 的数据结构（树状）
A78AFE90-DC6F-4DE1-95CA-CCB472BFC431.png
HTML 的组成部分为节点( Node
在 HTML 当中一切都是节点......
由结构图中我们可以看到，整个文档就是一个文档节点。
每一个 HMTL 标签都是一个元素节点(标签)。
标签中的文字则是文字节点。(文本)
标签的属性是属性节点。(属性)
DOM节点的获得
操作节点，必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素
document.getElementById("demo");
通过标签名找到 HTML 元素(返回的是标签数组)
document.getElementsByTagName("div");
通过类名找到 HTML 元素(返回的是标签数组)
document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
DOM 访问关系(节点的获得)
父节点 ( parentNode )
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode
兄弟节点
nextSibling
IE678 中指下一个元素节点(标签)。在火狐 谷歌 IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling
在火狐谷歌 IE9 都指的是下一个元素节点
总结:在 IE678 中用 nextSibling，在火狐谷歌 IE9+以后用 nextElementSibling。
下 一 个 兄 弟 节 点 =节 点 .nextElementSibling || 节 点 .nextSibling
previousSibling
IE678 中指前一个元素节点(标签)。在 火狐谷歌 IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling
在火狐谷歌 IE9 都指的是前一个元素节点。
总结:在 IE678 中用 previousSibling，在火狐谷歌 IE9+以后用 previousElementSibling。
下 一 个 兄 弟 节 点 =节 点 .previousElementSibling|| 节 点 .previousSibling
单个子节点
firstChild
IE678 中指第一个子元素节点(标签)。在火 狐谷歌 IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌 IE9 都指的第一个元素节点。
第 一 个 子 节 点 =父 节 点 .firstElementChild || 父 节 点 .firstChild
lastChild
IE678 中指最后一个子元素节点(标签)。在火 狐谷歌 IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌 IE9 都指的最后一个元素节点。
第 一 个 子 节 点 =父 节 点 .lastElementChild|| 父 节 点 .lastChild
所有子节点
childNodes:它是标准属性，它返回指定元素的子元素集合，包括 HTML 节点，所有属性，文本节点 (他还是 W3C 的亲儿子 )
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1 时才是元素节点(标签)
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
子节点数组 = 父节点.childNodes; 获取所有节点。
children:非标准属性，它返回指定元素的子元素集合。
但它只返回 HTML 节点，甚至不返回文本节点，虽然不是标准的 DOM 属 性，但它和 innerHTML 方法一样，得到了几乎所有浏览器的支持。
children 在 IE6/7/8 中包含注释节点，在 IE678 中，注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。
节 点 自 己 .parentNode.children[index];随 意 得 到 兄 弟 节 点 。
获取所有的兄弟节点
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
DOM 节点操作
创建节点
使用方法是这样的document.createElement();
新的标签（节点） = document.createElement(“标签名”);
插入节点
-
父节点.appendChild(新节点); 父节点的最后插入一个新节点
-
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null，那么他将在节点最后插入一个节点
删除节点
父节点.removeChild（子节点）；必须制定要删除的子节点
不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
复制节点
想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
新节点=要复制的节点.cloneNode(参数) ;
用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
节点属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var eleNode = document.getElementsByTagName("img")[0];
//属性、赋值获取两种方式
//1.元素节点.属性或者元素节点[属性]
eleNode.src = "image/jd2.png";
eleNode.aaa = "bbb";
console.log(eleNode.aaa);
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]);
//2.元素节点.方法();
console.log(eleNode.getAttribute("id"));
eleNode.setAttribute("id","你好");
eleNode.setAttribute("ccc","ddd");
eleNode.removeAttribute("id");
}
</script>
</head>
<body>
<img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>
</body>
</html>
前端Dom操作
关闭京东广告栏
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
// console.log(1);
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名
// topBanner.style.display = "none";
}
京东狗
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
this.src = "image/jd1.png";
}
//获取事件源（元素可以不获取直接使用id的值）
// var img = document.getElementById("box");
// //调用函数
// img.onmouseover = fn1;
// img.onmouseout = fn2;
// //定义函数
// function fn1() {
// img.src = "image/jd2.png";
// }
// function fn2() {
// img.src = "image/jd1.png";
// }
}
</script>
Js中的父子兄访问关系
A749C136-3BE9-457D-B40B-36FCA22D707F.png
一般常用的就是parentNode 和children，
节点自己.parentNode.children[index];随意得到兄弟节点
创建节点
//1.创建
var aaa = document.createElement("li");
插入节点
//插入节点
var box1 = document.getElementsByClassName("box1")[0];
//父节点.appendChild(新节点); 父节点的最后插入一个新节点
box1.appendChild(aaa);
//父节点.insertBefore(新节点,参考节点)在参考节点前插入;如果参考节点为null，那么他将在节点最后插入一个节点
box1.insertBefore(bbb,aaa);
删除节点
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自杀，自己删除自己
克隆节点
用于复制节点， 接受一个布尔值参数，
true 表示深复制（复制节点及其所有子节点），
false 表示浅复制（复制节点本身，不复制子节点）
var ccc = box1.cloneNode();
var ddd = box1.cloneNode(true);
value和innerHTML和innerText。
//value：标签的value属性。
console.log(document.getElementById("inp1").value);
//innerHTML：获取双闭合标签里面的内容。（识别标签）
console.log(document.getElementById("box1").innerHTML);
document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";
//innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
console.log(document.getElementById("box3").innerText);
document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
网友评论