事件
1.概述
JS是以事件驱动为核心的一门语言。
2.事件三要素
事件源、事件、事件驱动程序。
三句话:获取事件源、绑定事件、书写事件驱动程序。
获取事件源:document.getElementById(“box”);
绑定事件: box.onclick = function(){ 程序 };
书写事件驱动程序:以后要学习的关于DOM的操作。
2.1事件有哪些
2.2小知识点补充
什么条件下触动window.onload事件?(文本和图片加载完毕的时候)
js的加载时和html同步加载的。(如果使用元素在定义元素之间,容易报错。)
window.onload可以预防使用标签在定义标签之前。
整个页面上所有元素加载完毕再执行js内容。
window.onload可以预防使用标签在定义标签之前。
window.onload = function () {
var aaa = document.getElementById("box");
aaa.style.width = "100px";
}
DOM概述
3.解析过程
HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
4.DOM (文档对象模型)
document是文档对象模型的一部分。
DOM是一个复合的数据类型。
5.DOM的数据结构(树状)
6.HTML的组成部分为节点( Node )
在HTML当中一切都是节点……
由结构图中我们可以看到,整个文档就是一个文档节点。
每一个HMTL标签都是一个元素节点(标签)。
标签中的文字则是文字节点。(文本)
标签的属性是属性节点。(属性)
7.DOM节点的获得
操作节点,必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素
document.getElementById("demo");
通过标签名找到 HTML 元素
document.getElementsByTagName("div");
通过类名找到 HTML 元素
document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
标签=document.getElementById("demo"); 通过ID获得标签
他的返回值是一个标签,可以直接使用。获得属性值,设置属性。
标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组
标签数组= document.getElementsByClassName("a");通过类名获得标签数组
他们两个的返回值是标签数组,习惯性是遍历之后再使用。
特殊情况:数组中的值只有1个。
document.getElementsByTagName("div")[0];取数组中第一个元素
document.getElementsByClassName("a")[0];取数组中第一个元素
8.DOM 访问关系(节点的获得)
节点的访问关系,是以属性的方式存在的。
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。
8.1父节点 ( parentNode )
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.
8.2兄弟节点
Sibling就是兄弟的意思。Next:下一个的意思。Previous:前一个的意思。
nextSibling:调用者是节点。
IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling:调用者是节点。
IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。
总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling。
前一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
8.3单个子节点
firstChild:调用者是父节点。
IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。
IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。
最后一个子节点=父节点.lastElementChild|| 父节点.lastChild
8.4所有子节点
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (他才是W3C的亲儿子 )
火狐 谷歌等高本版会把换行也看做是子节点。
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
子节点数组 = 父节点.childNodes; 获取所有节点。
children:非标准属性,它返回指定元素的子元素集合。
但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中,注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。
8.5知识补充
节点自己.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;
}
定义一个函数。必须传递自己。定义一个数组,获得自己的父亲,在获得自己父亲的所有儿子(包括自己)。遍历所有的儿子,只要不是自己就放进数组中。
8.6要明白两个属性(!!!重点!!!)
parentNode 和 children 这两个属性。
9.DOM节点操作 (!!!!!重点!!!!!)
节点的访问关系都是属性。节点的操作都是函数或者方法。
9.1创建节点
使用方法是这样的document.createElement();
新的标签(节点) = document.createElement(“标签名”);
9.2插入节点(使用节点)
使用方法: 父节点.appendChild();
父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法:父节点.insertBefore(要插入的节点,参考节点)
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null,那么他将在节点最后插入一个节点。
9.3删除节点
用法:用父节点删除子节点。
父节点.removeChild(子节点);必须制定要删除的子节点
节点自己删除自己:
不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)
9.4复制节点 ( oldNode.cloneNode(true) )
想要复制的节点调用这个函数cloneNode(),得到一个新节点。 方法内部可以传参,如果是true,深层复制,如果是false,只复制节点本身。
新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)
<ul>
<li id="li1">我是参照标签</li>
</ul>
<script>
//document.write();不常用,因为容易覆盖原来的页面。
//innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
//document.createElement;也是比较多的,指定数量的时候一般用它。
var ul = document.getElementsByTagName("ul")[0];
var li1 = document.getElementById("li1");
//创建,添加,删除,替换
var li2 = document.createElement("li");
li2.innerText = "我是createElement创建的标签,用的是appendChild的方法添加的";
ul.appendChild(li2);
//用insertBefore添加
var li3 = document.createElement("li");
li3.innerText = "我是createElement创建的标签,用的是insertBefore的方法添加的"
//父节点.insertBefore(新节点,参照节点);
ul.insertBefore(li3,li1);
//删除,替换
ul.removeChild(li3);
//父节点.replaceChild(newNode,oldNode);
ul.replaceChild(li3,li2);
//克隆node.cloneNode(true);深层复制。
for(var i=0;i<=3;i++){
var newLi = li3.cloneNode(true);
ul.appendChild(newLi);
}
</script>
9.5节点属性(节点.属性)
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
注意:IE6、7不支持。
调用者:节点。 有参数。 没有返回值。
每一个方法意义不同。
<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>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
//两种方式不能交换使用,赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上。
div.aaaa = "1111";
console.log(div.aaaa); //1111
//get/set/removeAttribut: 绑定的属性值会出现在标签上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa")); //null
console.log(div.bbbb); //undefined
</script>
DOM详解(属性操作)
10.DOM元素
DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
节点就是DOM的组成。是一个对象,有属性和方法。获取方式有很多种。
节点分为元素节点(标签),文本节点,属性节点。
区分方法:nodeType: 1是标签,2是属性,3是文本
11.value和innerHTML和innerText和textContent
1.老版本的火狐不支持innerText,支持textContent
2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接
<input id="inp1" type="text" value="我是inpput的value属性值"/>
<div id="box1">
我是box1的内容
<div id="box2">我是box2的内容</div>
</div>
<div id="box3">
我是box1的内容
<div id="box4">我是box2的内容</div>
</div>
<script>
//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>";
</script>
12. Style
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>
<script>
var box = document.getElementsByTagName("div")[0];
// 1.样式少的时候使用
console.log(box.style.backgroundColor);
// 2.style是对象
console.log(box.style);
console.log(typeof box.style);
//3.值是字符串,没有设置值是“”;
console.log(box.style.lineHeight);
console.log(box.style.border);
// 4.命名规则,驼峰命名。和css不一样
console.log(box.style.backgroundColor);
// 5.设置了类样式不能获取。(只和行内式交互,和内嵌和外链无关)
console.log(typeof box.className);
//6.box.style.cssText = “字符串形式的样式”;
console.log(box.style.cssText);
box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"
</script>
</body>
</html>