1.1 init
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
1.2 Node接口属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="d1">Hello Worlddiv><div id="d1_1"> worlddiv>
<div id="d2">This is span>somespan> textdiv>
<div id="d3">div><div id="d4">div>
<div id="d5"><span>First spanspan>div>
<div id="d6">
<span>okspan>
div>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<base href="http://www.example.html">
<script>
console.log(document.nodeType); //9
console.log(document.nodeType === Node.DOCUMENT_NODE); //true
//
script>
<script>
var div = document.getElementById('d1');
console.log(div.nodeName); //DIV
script>
<script>
// 只有文本节点（text）和注释节点（comment）有文本值，
// 因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null.
// 同样的，也只有这两类节点可以设置nodeValue属性的值，其他类型的节点设置无效。
console.log(div.nodeValue); //null
console.log(div.firstChild.nodeValue);//"hello world"
script>
<script>
// textContent属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。
console.log(document.getElementById('d2').textContent);
// 该属性是可读写的，设置该属性的值，会用一个新的文本节点，替换所有原来的子节点。
// 它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容。
document.getElementById('d3').textContent = 'Hello
';
// 上面代码在插入文本时，会将标签解释为文本，而不会当作标签处理。
script>
<script>
console.log(document.baseURI);
// 如果无法读到网页的 URL，baseURI属性返回null。
// 可以使用 HTML 的1.3 Node接口方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// Node.hasChildNodes():
// 注意，子节点包括所有节点，哪怕节点只包含一个空格，hasChildNodes方法也会返回true。
// 判断一个节点有没有子节点，有许多种方法，下面是其中的三种:
// node.hasChildNodes()
// node.firstChild !== null
// node.childNodes && node.childNodes.length > 0
script>
<script>
// Node.cloneNode():
// 该方法有一些使用注意点:
// （1）克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性（即node.onclick = fn），添加在这个节点上的事件回调函数。
// （2）该方法返回的节点不在文档之中，即没有任何父节点，必须使用诸如Node.appendChild这样的方法添加到文档之中。
// （3）克隆一个节点之后，DOM 有可能出现两个有相同id属性（即id="xxx"）的网页元素，这时应该修改其中一个元素的id属性。如果原节点有name属性，可能也需要修改。
script>
<script>
// var insertedNode = parentNode.insertBefore(newNode, referenceNode);
// insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。
// var p = document.createElement('p');
// document.body.insertBefore(p, document.body.firstChild);
// 上面代码中，新建一个节点，插在document.body.firstChild的前面，也就是成为document.body的第一个子节点。
// 如果insertBefore方法的第二个参数为null，则新节点将插在当前节点内部的最后位置，即变成最后一个子节点。
script>
<script>
// var replacedNode = parentNode.replaceChild(newChild, oldChild);
script>
<script>
// Node.contains(): 返回一个布尔值，表示参数节点是否满足以下三个条件之一：
//（1） 参数节点为当前节点;
//（2） 参数节点为当前节点的子节点;
//（3） 参数节点为当前节点的后代节点;
// document.body.contains(node);
// 上面代码检查参数节点node，是否包含在当前文档之中。
script>
<script>
// Node.compareDocumentPosition():与contains方法完全一致，返回一个七个比特位的二进制值，表示参数节点与当前节点的关系。
// 二进制值 十进制值 含义
// 000000 0 两个节点相同
// 000001 1 两个节点不在同一个文档（即有一个节点不在当前文档）
// 000010 2 参数节点在当前节点的前面
// 000100 4 参数节点在当前节点的后面
// 001000 8 参数节点包含当前节点
// 010000 16 当前节点包含参数节点
// 100000 32 浏览器内部使用
script>
<script>
// Node.isEqualNode()，Node.isSameNode():
// Node.isEqualNode():
// 返回一个布尔值，用于检查两个节点是否相等。
// 所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
// Node.isSameNode():
// isSameNode方法返回一个布尔值，表示两个节点是否为同一个节点。
/* var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.isSameNode(p2) // false
p1.isSameNode(p1) // true */
script>
<script>
// Node.normalize():
// 用于清理当前节点内部的所有文本节点（text）。
// 它会去除空的文本节点，并且将毗邻的文本节点合并成一个，
// 也就是说不存在空的文本节点，以及毗邻的文本节点。
script>
<script>
// Node.getRootNode():返回当前节点所在文档的根节点。
document.body.firstChild.getRootNode() === document // true
script>
body>
html>
1.4 NodeList接口
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
console.log(document.body.childNodes instanceof NodeList);
console.log(document.body.childNodes.length);
// 除了使用forEach方法遍历 NodeList 实例，还可以使用for循环。
var children = document.body.childNodes;
for(var i = 0;i < children.length;i++) {
var item = children[i];
}
// 注意，NodeList 实例可能是动态集合，也可能是静态集合。
// 所谓动态集合就是一个活的集合，DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 实例。
// 目前，只有Node.childNodes返回的是一个动态集合，其他的 NodeList 都是静态集合。
script>
<script>
// length属性返回 NodeList 实例包含的节点数量。
// document.getElementsByTagName('xxx').length;
// 上面代码中，document.getElementsByTagName返回一个 NodeList 集合。对于那些不存在的 HTML 标签，length属性返回0。
script>
<script>
// forEach方法用于遍历 NodeList 的所有成员。
// 它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的forEach方法完全一致。
// var children = document.body.childNodes;
// children.forEach(function f(item, i, list) {
// // ...
// }, this);
// 上面代码中，回调函数f的三个参数依次是当前成员、位置和当前 NodeList 实例。
// forEach方法的第二个参数，用于绑定回调函数内部的this，该参数可省略。
script>
<script>
// item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
// document.body.childNodes.item(0);
// 上面代码中，item(0)返回第一个成员。
// 如果参数值大于实际长度，或者索引不合法（比如负数），item方法返回null。如果省略参数，item方法会报错。
// 所有类似数组的对象，都可以使用方括号运算符取出成员。一般情况下，都是使用方括号运算符，而不使用item方法。
// document.body.childNodes[0];
script>
<script>
// 这三个方法都返回一个 ES6 的遍历器对象，可以通过for...of循环遍历获取每一个成员的信息。
// 区别在于，keys()返回键名的遍历器，
// values()返回键值的遍历器，
// entries()返回的遍历器同时包含键名和键值的信息。
var childrens = document.body.childNodes;
for(var key of childrens.keys()) {
console.log(key);
}
for(var value of childrens.values()) {
console.log(value);
}
for(var entry of childrens.entries()) {
console.log(entry);
}
script>
body>
html>
1.5 HTMLCollection接口
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<img id="image_ID" src="">
<script>
// 如果元素节点有id或name属性，那么HTMLCollection实例上面，
// 可以使用id属性或name属性引用该节点元素。如果没有对应的节点，则返回null。
var image = document.getElementById('image_ID');
console.log(document.images.image_ID === image); //true
//document.images.image_ID => 通过id属性引用该节点元素
console.log(document.images); //document.images是一个数组
script>
body>
html>
1.6 ParentNode接口
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
1.7 ChildNode接口
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body bgcolor="yellow" onload="">
<div id="mydiv" align="left">helloWorlddiv>
<a id="test" href="http://www.baidu.com">a>
<div id="DIV" data-foo="bar">div>
<span data-zhang-xing-wei="Love" id="span">实验span>
<script>
console.log(document.body.attributes[0]); //bgcolor="yellow" （通过序号引用）
console.log(document.body.attributes.bgcolor); //bgcolor="yellow" （通过该属性名引用）
console.log(document.body.attributes['onload']); //οnlοad="" （通过下标形式引用）
// 注意，上面代码的三种方法，返回的都是属性节点对象，而不是属性值。
// 属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。
script>
<script>
var div = document.getElementById('mydiv');
console.log(div.attributes[0].name); //"id"
console.log(div.attributes[0].nodeName); //"id"
console.log(div.attributes[0].value); //"mydiv"
console.log(div.attributes[0].nodeValue); //"mydiv"
script>
<script>
var a = document.getElementById('test');
console.log(a.id); //"test" (通过元素对象直接引用标准属性)
console.log(a.href); //"http://www.baidu.com/"
// var img = document.getElementById('myImage');
// img.src = 'http://www.example.com/image.jpg';
// 上面的写法，会立刻替换掉img对象的src属性，即会显示另外一张图片。
script>
<script>
var div = document.getElementById('mydiv');
console.log(div.getAttribute('align')); // "left"
div.setAttribute('align','center');
console.log(div.hasAttribute('align','center')); //true
div.removeAttribute('align');
script>
<script>
var DIV = document.getElementById('DIV');
console.log(DIV.dataset.foo); //"bar"
DIV.dataset.foo = "xyz";
// 上面代码中，通过dataset.foo读写data-foo属性。
// 删除一个data-*属性，可以直接使用delete命令。
delete DIV.dataset.foo;
// 除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
// 注意，data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。
// 而且，属性名应不该使用大写字母（一律进行小写），比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。
// 转成dataset的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。
// 反过来，dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。
// 比如，dataset.helloWorld 会转成 data-hello-world。
/*
HelloWorld
引用该属性： div.dataset.selfAttr //通过dataset对象进行引用
由dataset.selfAttr 转换为 属性名时，data-self-attr //规则
*/
script>
<script>
var span = document.getElementById('span');
// console.log(span.dataset.zhangxingwei); //undefined
console.log(span.dataset.zhangXingWei); //"Love"
delete document.getElementById('span').dataset.zhangXingWei;
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
var img = new Image();
console.log(img instanceof Image); //true
console.log(img instanceof HTMLImageElement); //true
script>
body>
html>
4.1 init
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="div">hello Worlddiv>
<div id="DIV">hello div>
<div id="Div" style="background-color: purple; border: 1px solid red;">div>
<div id="hello" style="margin: 10px!important; color: green;">ShiJiediv>
<div id="world" style="background-color: paleturquoise; border: 2px solid red;">Hellosfjfsfjsdiv>
<div id="love"> 测试 div>
<script>
var div = document.getElementById('div');
div.setAttribute(
'style', //属性名
'background-color:red;' + 'border: 1px solid red;' //属性值
);
// 上述代码相当于下面的HTML代码：
//
script>
<script>
var divStyle = document.querySelector('div').style; //元素节点的style属性
var div = document.getElementById('div');
// console.log('---------->');
// console.log(divStyle instanceof CSSStyleDeclaration); //true
// console.log('---------->'); //divStyle就是CSSStyleDeclaration的实例对象
divStyle.backgroundColor = 'green';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10px';
// 上面代码中，style属性的值是一个 CSSStyleDeclaration 实例。
// 这个对象所包含的属性与 CSS 规则一一对应，但是名字需要改写，
// 比如background-color写成backgroundColor。改写的规则是将横杠从 CSS 属性名中去除，
// 然后将横杠后的第一个字母大写。如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。
// 注意，该对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，divStyle.width不能写为100，而要写为100px。
// 另外，Element.style返回的只是行内样式，并不是该元素的全部样式。
// 通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。
// 元素的全部样式要通过window.getComputedStyle()得到。
script>
<script>
//1. cssText
var DIVStyle = document.getElementById('DIV').style;
DIVStyle.cssText =
'background-color: yellow;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';
// 注意，cssText的属性值不用改写 CSS原生属性名(background-color，保留了连字符，不用转驼峰了)。
// 删除一个元素的所有行内样式，最简便的方法就是设置cssText为空字符串。
// DIV.cssText = '';
//2.length
var myDiv = document.getElementById('Div');
console.log(myDiv.style.length); //18
//3.parentRule
// 该属性只读，且只在使用 CSSRule 接口时有意义。
console.log('----------');
script>
<script>
//1.getPropertyPriority():
var style = document.getElementById('hello').style;
console.log(style.margin); //"10px"
console.log(style.getPropertyPriority('margin')); //"important"
console.log(style.getPropertyPriority('color')); //""
// 上面代码中，margin属性有important优先级，color属性没有。
//2.getPropertyValue():
console.log(style.getPropertyValue('color')); //"green"
//3. item():
var Style = document.getElementById('world').style;
console.log(Style.item(0)); //"background-color"
console.log(Style.item(1)); //"border-top-width"
//4.removeProperty():
Style.removeProperty('border');
//此时，相应的div里面style属性里就没有border这个属性了！
//5.setProperty(属性名，[属性值]，[优先级]):
// 该方法可以接受三个参数:
// (1) 属性名，该参数是必需的。
// (2) 属性值，该参数可选。如果省略，则参数值默认为空字符串。
// (3) 优先级，该参数可选。如果设置，唯一的合法值是important，表示 CSS 规则里面的!important。
Style.setProperty('border','3px solid green');
script>
body>
html>
4.2 css模块侦测
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
console.log(document.body.style['maxWidth']); //""(说明支持这一属性)
console.log(document.body.style['maximumWidth']); //undefined
// 上面代码说明，这个浏览器支持max-width属性，但是不支持maximum-width属性。
// 注意，不管 CSS 属性名的写法带不带连词线，style属性上都能反映出该属性是否存在。
console.log(document.body.style['backgroundColor']); //""
console.log(document.body.style['background-color']); //""
script>
body>
html>
4.3 continue
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#test:before {
content: 'Before';
color: #FF0;
}
style>
head>
<body>
<div>HelloWorlddiv>
<div id="test">test contentdiv>
<script>
// 1. CSS.escape():
//
// 上面代码中，该元素的id属性包含一个#号，该字符在 CSS 选择器里面有特殊含义。
// 不能直接写成document.querySelector('#foo#bar')，只能写成document.querySelector('#foo\\#bar')。
// 这里必须使用双斜杠的原因是，单引号字符串本身会转义一次斜杠。
// CSS.escape方法就用来转义那些特殊字符 =>
// document.querySelector('#' + CSS.escape('foo#bar'));
//2. CSS.supports(): 表示当前环境是否支持某一句 CSS 规则。
// 它的参数有两种写法:
// 一种是第一个参数是属性名，第二个参数是属性值；
// 另一种是整个参数就是一行完整的 CSS 语句。
console.log(CSS.supports('transform-origin', '5px')); //true
console.log(CSS.supports('transform-origin', '5px')); //true
// 注意，第二种写法的参数结尾不能带有分号，否则结果不准确。
console.log(CSS.supports('display: table-cell;')); //false
script>
<script>
var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
console.log(styleObj.backgroundColor); //"rgba(0, 0, 0, 0)"
// 上面代码中，得到的背景色就是div元素真正的背景色。
script>
<script>
// 节点元素的style对象无法读写伪元素的样式，这时就要用到window.getComputedStyle()。
// JavaScript 获取伪元素，可以使用下面的方法。
var test = document.querySelector('#test');
var result = window.getComputedStyle(test,':before').content; //""Before""
var color = window.getComputedStyle(test,':before').color; //"rgb(255, 255, 0)"
console.log(result);
console.log(color);
// 此外，也可以使用 CSSStyleDeclaration 实例的getPropertyValue方法，获取伪元素的属性。
var result1 = window.getComputedStyle(test,':before').getPropertyValue('content');
var color1 = window.getComputedStyle('test',':before').getPropertyValue('color');
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
4.4 StyleSheet
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
var sheets = document.styleSheets; //StyleSheetList
var sheet = document.styleSheets[0]; //StyleSheet
console.log(sheets instanceof StyleSheetList); //true
console.log(sheet instanceof StyleSheet); //false
script>
<script>
document.styleSheets[0].href;
// StyleSheet.media属性返回一个类似数组的对象（MediaList实例），成员是表示适用媒介的字符串。
// 表示当前样式表是用于屏幕（screen），还是用于打印（print）或手持设备（handheld），或各种媒介都适用（all）。
// 该属性只读，默认值是screen。
document.styleSheets[0].media.mediaText;
document.styleSheets[0].type // "text/css"
// CSS 的@import命令允许在样式表中加载其他样式表。
// StyleSheet.parentStyleSheet属性返回包含了当前样式表的那张样式表。
// 如果当前样式表是顶层样式表，则该属性返回null。
if (stylesheet.parentStyleSheet) {
sheet = stylesheet.parentStyleSheet;
} else {
sheet = stylesheet;
}
script>
<script>
var sheet = document.querySelector('#styleElement').sheet;
sheet.insertRule('#block { color: white }', 0);
sheet.insertRule('p { color: red }', 1);
// 该方法可以接受两个参数，第一个参数是表示 CSS 规则的字符串，这里只能有一条规则，否则会报错。
// 第二个参数是该规则在样式表的插入位置（从0开始），该参数可选，默认为0（即默认插在样式表的头部）。
// 注意，如果插入位置大于现有规则的数目，会报错。
// 该方法的返回值是新插入规则的位置序号。
document.styleSheets[0].deleteRule(1);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
5. document操作
5.1 属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
console.log(document.defaultView === window); //true
console.log(document.doctype); //
console.log(document.documentElement); //html元素
console.log(document.scrollingElement); //html元素
// 标准模式下，这个属性返回的文档的根元素document.documentElement（即）。
// 兼容（quirk）模式下，返回的是元素，如果该元素不存在，返回null。
console.log(document.activeElement); //body
console.log(document.fullscreenElement); //null
// if(document.fullscreenElement.nodeName == 'VIDEO') {
// console.log('全屏播放视频');
// }
// 上面代码中，通过document.fullscreenElement可以知道
script>
<script>
// 打印文档所有的链接
var links = document.links;
for(var i = 0;i < links.length;i++) {
console.log(links[i]);
}
//
var selectForm = document.forms[0]; //获取文档第一个表单
//在所有img标签中，寻找某张图片。
var imglist = document.images;
for(var i = 0;i < imglist.length;i++) {
if(imglist[i].src === 'banner.gif') {
// ...
}
}
//
var scripts = document.scripts;
if(scripts.length !== 0) {
console.log('当前网页有脚本！');
}
//HTMLCollection实例：
console.log(document.links instanceof HTMLCollection); //true
console.log(document.images instanceof HTMLCollection); //true
console.log(document.forms instanceof HTMLCollection); //true
console.log(document.embeds instanceof HTMLCollection); //true
console.log(document.scripts instanceof HTMLCollection); //true
console.log('----------');
script>
<script>
console.log(document.URL);
console.log(document.documentURI === document.URL); //true
// 如果文档的锚点（#anchor）变化，这两个属性都会跟着变化。
console.log(document.referrer);
// 如果无法获取来源，或者用户直接键入网址而不是从其他网页点击进入，document.referrer返回一个空字符串。
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
5.2 方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
document.open();
document.write('hello World!');
document.write('i love you!')
document.write('HELLO WORLD!
');
document.write(1);
document.write(2);
document.writeln(1);
document.writeln(2);
// 注意，writeln方法添加的是 ASCII 码的换行符，渲染成 HTML 网页时不起作用，即在网页上显示不出换行。网页上的换行，必须显式写入
。
document.close();
// 注意，document.write会当作 HTML 代码解析，不会转义。
// document.write('hello world
');
// 上面代码中，document.write会将当作 HTML 标签解释。
// 如果页面已经解析完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
// document.write是JavaScript语言标准化之前就存在的方法，现在完全有更符合标准的方法向文档写入内容（比如对innerHTML属性赋值）。所以，除了某些特殊情况，应该尽量避免使用document.write这个方法。
// document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。
script>
<script>
var elements = document.getElementsByClassName('foo bar');
// 上面代码返回同时具有foo和bar两个class的元素，foo和bar的顺序不重要。
//document.querySelector方法的参数使用 CSS 选择器语法，document.getElementById方法的参数是元素的id属性。
document.getElementById('myElement');
document.querySelector('#myElement');
// 上面代码中，两个方法都能选中id为myElement的元素，但是document.getElementById()比document.querySelector()效率高得多。
// 另外，这个方法只能在document对象上使用，不能在其他元素节点上使用。
//document.elementFromPoint()，document.elementsFromPoint():
var element = document.elementFromPoint(50, 50);
// 上面代码选中在(50, 50)这个坐标位置的最上层的那个 HTML 元素。
// elementFromPoint方法的两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。
// 如果位于该位置的 HTML 元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。
// document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素。
// var elements = document.elementsFromPoint(x, y);
script>
<script>
// 1.document.caretPositionFromPoint():
var range = document.caretPositionFromPoint(clientX, clientY);
// 上面代码中，range是指定坐标点的 CaretPosition 对象。该对象有两个属性:
// (1)CaretPosition.offsetNode：该位置的节点对象
// (2)CaretPosition.offset：该位置在offsetNode对象内部，与起始位置相距的字符数。
// 2.document.createElement():
var newDiv = document.createElement('div');
// createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号（即<和>）会报错。
// 注意，document.createElement的参数可以是自定义的标签名。
// document.createElement('foo');
// 3.document.createAttribute()：
// document.createAttribute方法的参数name，是属性的名称。
//4.document.createDocumentFragment():
// DocumentFragment是一个存在于内存的 DOM 片段，不属于当前文档，
// 常常用来生成一段较复杂的 DOM 结构，然后再插入当前文档。
// 这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，
// 都不会引发网页的重新渲染，比直接修改当前文档的 DOM 有更好的性能表现。
script>
<script>
//1.
var event = document.createEvent(type);
// document.createEvent方法的参数是事件类型，比如UIEvents、MouseEvents、MutationEvents、HTMLEvents。
//2. document.createNodeIterator():
var nodeIterator = document.createNodeIterator(
document.body,
NodeFilter.SHOW_ELEMENT
);
// 上面代码返回元素子节点的遍历器。
// document.createNodeIterator方法第一个参数为所要遍历的根节点，
// 第二个参数为所要遍历的节点类型，这里指定为元素节点（NodeFilter.SHOW_ELEMENT）。
// 几种主要的节点类型写法如下:
//1. 所有节点：NodeFilter.SHOW_ALL
//2. 元素节点：NodeFilter.SHOW_ELEMENT
//3. 文本节点：NodeFilter.SHOW_TEXT
//4. 评论节点：NodeFilter.SHOW_COMMENT
// document.createNodeIterator方法返回一个“遍历器”对象（NodeFilter实例）。该实例的nextNode()方法和previousNode()方法，可以用来遍历所有子节点。
/* var nodeIterator = document.createNodeIterator(document.body);
var pars = [];
var currentNode;
while (currentNode = nodeIterator.nextNode()) {
pars.push(currentNode);
} */
// 上面代码中，使用遍历器的nextNode方法，将根节点的所有子节点，依次读入一个数组。
// nextNode方法先返回遍历器的内部指针所在的节点，然后会将指针移向下一个节点。
// 所有成员遍历完成后，返回null。previousNode方法则是先将指针移向上一个节点，然后返回该节点。
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
6. Element操作
6.1 属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button accessKey="h" id="btn">button>
<div contenteditable="true">div>
<div class="one two three" id="div">div>
<div id="foo" data-columns="3" data-index-number="12334" data-parent="cats">div>
<script>
var btn = document.getElementById('btn');
console.log(btn.accessKey); //"h"
// 上面代码中，btn元素的快捷键是h，按下Alt + h就能将焦点转移到它上面。
// Element.tabIndex:
// tabIndex属性值如果是负值（通常是-1），则 Tab 键不会遍历到该元素。
// 如果是正整数，则按照顺序，从小到大遍历。
// 如果两个元素的tabIndex属性的正整数值相同，则按照出现的顺序遍历。
// 遍历完所有tabIndex为正整数的元素以后，再遍历所有tabIndex等于0、
// 或者属性值是非法值、或者没有tabIndex属性的元素，顺序为它们在网页中出现的顺序。
script>
<script>
var div = document.getElementById('div');
console.log(div.className); //"one two three"
console.log(div.classList); //["one","two","three"]
// classList对象有下列方法:
//1. add()：增加一个 class。
//2. remove()：移除一个 class。
//3. contains()：检查当前元素是否包含某个 class。
//4. toggle()：将某个 class 移入或移出当前元素。
//5. item()：返回指定索引位置的 class。
//6. toString()：将 class 的列表转为字符串。
var Div = document.getElementById('foo');
console.log(Div.dataset.columns); //"3"
console.log(Div.dataset.indexNumber); //"12334"
console.log(Div.dataset.parent); //"cars"
// 注意，dataset上面的各个属性返回都是字符串。
// HTML 代码中，data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。它们转成 JavaScript 对应的dataset属性名，规则如下。
// 1. 开头的data-会省略。
// 2. 如果连词线后面跟了一个英文字母，那么连词线会取消，该字母变成大写。
// 3. 其他字符不变。
// 因此，data-abc-def对应dataset.abcDef，data-abc-1对应dataset["abc-1"]。
// 除了使用dataset读写data-属性，也可以使用Element.getAttribute()和Element.setAttribute()，通过完整的属性名读写这些属性。
// innerHTML:
// 注意，读取属性值的时候，如果文本节点包含&、小于号（<）和大于号（>），innerHTML属性会将它们转为实体形式&、<、>。如果想得到原文，建议使用element.textContent属性。
/*
HTML代码如下 5 > 3
document.getElementById('para').innerHTML
// 5 > 3
*/
//outerHTML:
// outerHTML属性是可读写的，对它进行赋值，等于替换掉当前元素。
console.log(Div.outerHTML);
//
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
6.2 方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// element.insertAdjacentElement(position, element);
// Element.insertAdjacentElement方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。
// beforebegin：当前元素之前
// afterbegin：当前元素内部的第一个子节点前面
// beforeend：当前元素内部的最后一个子节点后面
// afterend：当前元素之后
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
7. 事件种类
7.1 鼠标事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
7.2 键盘事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
7.3 进度事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
7.4 拖拉事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div draggable="true" id="div">hellodiv>
<script>
var div = document.getElementById('div');
div.addEventListener('dragstart',function(e) {
this.style.backgroundColor = 'red';
},false);
div.addEventListener('dragend',function(e){
this.style.backgroundColor = 'green';
},false);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
7.5 触摸事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
7.6 表单事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
7.7 资源事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
7.8 session历史事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
7.9 网页状态事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
7.10 窗口事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
7.11 剪切板事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
7.12 焦点事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
8. 事件模型
8.1 init
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div onclick="console.log('HelloWorld')">helloWorlddiv>
<div onclick="doSomething()">helloWorlddiv>
<div onclick="alert('Father')">
<button onclick="alert('Son')">点击button>
div>
<div id="div">shijiediv>
<script>
function doSomething() {
console.log('hello123456');
}
script>
<script>
div.onclick = function (event) {
console.log('触发事件');
};
// 使用这个方法指定的监听函数，也是只会在冒泡阶段触发。
// 和HTML中的onclick差球不多！！！
script>
<script>
//发生了覆盖，同一事件只能定义一个监听函数
var div = document.getElementById('div');
div.onclick = function() {
console.log('First');
}
div.onclick = function() {
console.log('Second');
}
//addEventListener: 没有覆盖，同一个事件可以定义多个监听函数
div.addEventListener('click',function() {
console.log('First');
},false);
div.addEventListener('click',function() {
console.log('Second');
});
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
8.2 事件代理
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
// 冒泡顺序： li -> ul -> body -> html -> document -> window
var ul = document.querySelector('ul');
ul.addEventListener('click',function(event){
// if(event.target.tagName.toLowerCase() === 'li') {
// console.log(event);
event.target.style.backgroundColor = 'red';
// }
})
script>
<script>
// 1.
// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click',function(event){
event.stopPropagation();
},true);
// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click',function(event){
event.stopPropagation();
},false);
// 上面代码中，stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。
// 2.但是，stopPropagation方法只会阻止事件的传播，不会阻止该事件触发节点的其他click事件的监听函数。也就是说，不是彻底取消click事件。
p.addEventListener('click', function (event) {
event.stopPropagation();
console.log(1);
});
p.addEventListener('click', function(event) {
// 仍然会触发
console.log(2);
});
// 上面代码中，p元素绑定了两个click事件的监听函数。stopPropagation方法只能阻止这个事件向其他元素传播。因此，第二个监听函数会触发。输出结果会先是1，然后是2。
// 3.如果想要彻底阻止这个事件的传播，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。
p.addEventListener('click', function (event) {
event.stopImmediatePropagation();
console.log(1);
});
p.addEventListener('click', function(event) {
// 此时不会触发为了
console.log(2);
});
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
8.3 Event对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div>
<p>hellop>
div>
<script>
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click',function(event){
console.log(event.composedPath());
},false);
// [p, div, body, html, document, Window]
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
8.4 CustomEvent
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
var event = new CustomEvent('build', {'detail': 'hello'});
document.body.addEventListener('build',function(e) {
console.log(e.detail);
});
document.body.dispatchEvent(event);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
9. Text节点和DocumentFragment节点
9.1 Text节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p id="p">Hello <em>Bem> p>
<div>World <em>Helloem>div>
<script>
//读取文本内容
console.log(document.querySelector('p').firstChild.data);
//与上等价
console.log(document.querySelector('p').firstChild.nodeValue);
//设置文本内容
document.querySelector('p').firstChild.data = 'World';
//
// console.log(document.getElementById('p').firstChild.wholeText);
//
var tn = document.querySelector('div').firstChild;
console.log(tn.nextElementSibling); //Hello
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
9.2 DocumentFragment节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27