JavaScript进阶进阶

cookie

1 cookie作用

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

示例

//创建cookie

function setCookie(c_name,value,expiredays)

{

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

//保存cookie

document.cookie=c_name+ "="

+escape(value)

+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

//寻找相应cookie

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1)

{

c_start=c_start + c_name.length+1 ;

c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) c_end=document.cookie.length;

return unescape(document.cookie.substring(c_start,c_end));

}

return "";

} function checkCookie() {

username=getCookie("用户名");//寻找cookie

if (username!=null && username!="")

{//找到了

alert("欢迎再来："+username+"!");

}

else

{//未找到

username=prompt("请输入姓名：","");

if (username!=null && username!="") { setCookie("用户名",username,1);//创建cookie } } } checkCookie();

2 本地存储的区别

cookie 与 storage 的区别?

出现时间
cookie:有 JS 的时候就有了
storage: 有 H5 以后才有的
存储大小
cookie: 4kb
storage: 20MB
前后端交互(前端向后端发送请求)
cookie: 交互时请求默认携带 cookie
storage: 交互式请求不会携带, 除非前端人员配置传递
前后端操作

cookie: 不管前后端语言都可以操作

storage: 只能有前端语言来操作 (JS)
过期时间:
cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置
storage: 不能通过手动配置

localStorage 与 sessionStorage 的区别?

过期时间:
localStorage: 永久存储, 除非手动清理
sessionStorage: 会话级别, 关闭页面, 存储就失效

DOM

获取DOM的方法

1 常规获取

<div class="box">我具有 class 的box1</div>  
<div class="box" id="box2">我是有 class 的box2</div>                       
<div class="box">我是box3</div>

JS 在获取常规元素时与 CSS 一样, 可以通过类名, 标签名, ID名

1.1 通过类名去获取标签

var oBox = document.getElementsByClassName('box')

oBox 是一个伪数组, 想要获取到某一个元素, 可以通过下标

伪数组: 长得和数组类似, 有下标有length, 但是没有数组的常用方法

不管页面具有这个类名的元素有多少个, 获取到的永远是伪数组的形式

1.2 通过标签名去获取标签

var oDiv = document.getElementsByTagName('div')

通过标签名去获取标签也是伪数组

1.3 通过 ID名去获取标签

var oBox2 = document.getElementById('box2')

因为 ID 通常都是独一无二的，所以这里获取到的就是一个具有 box2 ID 名的标签, 而不是一个伪数组

2.1 按照选择器的形式获取标签满足条件的第一个

var myDiv = document.querySelector('.box')

querySelector: 获取到满足条件的第一个标签

2.2 按照选择器的形式后去所有满足条件的标签

var myDivAll = document.querySelectorAll('.box')

querySelectorAll: 获取到满足条件的所有标签

2 非常规获取

获取非常规 DOM(HTML head body)

1.1 HTML语法: document.documentElement

1.2 head 语法: document.head

1.3 body 语法: document.body

innerHTML和innerText

1获取属性

innerHTML * 获取到标签内部的文本与 HTML 结构
innerText *只会获取到页面结构的文本内容, HTML结构会被忽略掉

2 操作元素的属性

innerHTML

赋值时会识别字符串中的 html结构
如果有实际的标签, 会把它当成标签渲染到页面上
innerText
赋值时不会识别字符串中的 html 结构
如果有实际的标签, 会把它当成字符串渲染到页面上

元素属性的获取设置与移出

<div class="box" a="100" b="200">我是一个具有很多属性的 DIV 标签</div>

1 获取元素

var oBox = document.getElementsByClassName('box')[0]

2. 获取元素的某些属性

语法: 元素.getAttribute('要查询的属性名')

 console.log(oBox.getAttribute('class'))  

 console.log(oBox.getAttribute('a')) 

 console.log(oBox.getAttribute('b'))

3. 设置元素的某些属性

语法: 元素.setAttribute('要设置的属性名', '要设置的属性值

oBox.setAttribute('a', 'qwer')
oBox.setAttribute('b', 'asdf')

4. 移出元素的某个属性

语法: 元素.removeAttribute('要移除的属性名')

JavaScript操作DOM元素属性和方法

Dom元素基本操作方法API

　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

　　DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表1列出了DOM元素的一些有用的属性，表列出了一些有用的方法。

下表1用于处理XML文档的DOM元素属性:

属性名描述

childNodes 返回当前元素所有子元素的数组

firstChild 返回当前元素的第一个下级子元素

lastChild 返回当前元素的最后一个子元素

nextSibling 返回紧跟在当前元素后面的元素

nodeValue 指定表示元素值的读/写属性

parentNode 返回元素的父节点

previousSibling 返回紧邻当前元素之前的元素

表2　用于遍历XML文档的DOM元素方法

方法名描述

getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素

getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组

hasChildNodes() 返回一个布尔值，指示元素是否有子元素

getAttribute(name) 返回元素的属性值，属性由name指定

　　有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

　　从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。

表3-3 动态创建内容时所用的W3C DOM属性和方法

属性/方法描述

document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素

document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点

< element>.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点

< element>.getAttribute(name)

< element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值

< element>.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面

< element>.removeAttribute(name) 这个方法从元素中删除属性name

< element>.removeChild(childNode) 这个方法从元素中删除子元素childNode

< element>.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode

< element>.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素

Document－－最顶层的节点，所有的其他节点都是附属于它的。

DocumentType－－DTD引用（使用语法）的对象表现形式，它不能包含子节点。

DocumentFragment－－可以像Document一样来保存其他节点。

Element－－表示起始标签和结束标签之间的内容，例如< tag></ tab>或者< tag/>。这是唯一可以同时包含特性和子节点的节点类型。

Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。

Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。

CDataSection－－< ![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。

Entity－－表示在DTD中的一个实体定义，例如< !ENTITY foo"foo">。这个节点类型不能包含子节点。

EntityReference－－代表一个实体引用，例如 & quot;。这个节点类型不能包含子节点。

ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。

Comment－－代表XML注释。这个节点不能包含子节点。

Notation－－代表在DTD中定义的记号。这个很少用到。

Node接口定义了所有节点类型都包含的特性和方法。

特性/方法类型/返回类型说明

nodeName String 节点的名字;根据节点的类型而定义

nodeValue String 节点的值;根据节点的类型而定义

nodeType Number 节点的类型常量值之一

ownerDocument Document 指向这个节点所属的文档

firstChild Node 指向在childNodes列表中的第一个节点

lastChild Node 指向在childNodes列表中的最后一个节点

childNodes NodeList 所有子节点的列表

previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null

nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null

hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真

attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点

appendChild(node) Node 将node添加到childNodes的末尾

removeChild(node) Node 从childNodes中删除node

replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode

insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd

除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。

NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。

NamedNodeMap－－同时使用数值和名字进行索引的节点表;用于表示元素特性。

2.访问相关的节点

下面的几节中考虑下面的HTML页面

1<html>
2    <head>
3        <title>DOM Example</title>
4    </head>
5    <body>
6        <p>Hello World!</p>
7        <p>Isn't this exciting?</p>
8        <p>You're learning to use the DOM!</p>
9    </body>
10</html>

要访问< html/>元素（你应该明白这是该文件的document元素），你可以使用document的documentElement特性：

var oHtml = document.documentElement;

现在变量oHtml包含一个表示< html/>的HTMLElement对象。如果你想取得< head/>和< body/>元素，下面的可以实现：

var oHead = oHtml.firstChild;

var oBody = oHtml.lastChild;

也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array，使用方括号标记：

var oHead = oHtml.childNodes[0];

var oBody = oHtml.childNodes[1];

注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法：

var oHead = oHtml.childNodes.item(0);

var oBody = oHtml.childNodes.item(1);

HTML DOM页定义了document.body作为指向< body/>元素的指针。

var oBody = ducument.body;

有了oHtml,oHead和oBody这三个变量，就可以尝试确定它们之间的关系：

alert(oHead.parentNode==oHtml);

alert(oBody.parentNode==oHtml);

alert(oBody.previousSibling==oHead);

alert(bHead.nextSibling==oBody);

alert(oHead.ownerDocument==document);

以上均outputs "true"。

3.处理特性

正如前面所提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有 Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法：

getNamedItem(name)－－返回nodename属性值等于name的节点;

removeNamedItem(name)－－删除nodename属性值等于name的节点;

setNamedItem(node)－－将node添加到列表中，按其nodeName属性进行索引;

item(pos)－－像NodeList一样，返回在位置pos的节点;

注：请记住这些方法都是返回一个Attr节点，而非特性值。

NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，这的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。例如，假设有这样一个元素：

< p style="color:red" id="p1">Hello world!

同时，假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:

var sId = oP.attributes.getNamedItem("id").nodeValue;

当然，还可以用数值方式访问id特性，但这样稍微有些不直观：

var sId = oP.attributes.item(1).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性：

oP.attributes.getNamedItem("id").nodeValue="newId";

Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。

因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：

getAttribute(name)－－等于attributes.getNamedItem(name).value;

setAttribute(name,newvalue)－－等于attribute.getNamedItem(name).value=newvalue;

removeAttribute(name)－－等于attribute.removeNamedItem(name)。

4.访问指定节点

(1)getElementsByTagName()

核心(XML) DOM定义了getElementsByTagName()方法，用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的 NodeList。在Element对象中，tagName特性总是等于小于号之后紧跟随的名称－－例如，< img />的tagName是"img"。下一行代码返回文档中所有< img />元素的列表：

var oImgs = document.getElementsByTagName("img");

把所有图形都存于oImgs后，只需使用方括号或者Item()方法（getElementsByTagName()返回一个和childNodes一样的NodeList），就可以像访问子节点那样逐个访问这些节点了：

alert(oImgs[0].tagName); //outputs "IMG"

假如只想获取在某个页面第一个段落的所有图像，可以通过对第一个段落元素调用getElementsByTagName()来完成，像这样：

var oPs = document.getElementByTagName("p");

var oImgsInp = oPs[0].getElementByTagName("img");

可以使用一个星号的方法来获取document中的所有元素：

var oAllElements = document.getElementsByTagName("*");

当参数是一个星号的时候，IE6.0并不返回所有的元素。必须使用document.all来替代它。

(2)getElementsByName()

HTML DOM 定义了getElementsByName()，这用来获取所有name特性等于指定值的元素的。

(3)getElementById()

这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的－－这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。

注：如果给定的ID匹配某个元素的name特性，IE6.0还会返回这个元素。这是一个bug，也是必须非常小心的一个问题。

5.创建新节点

最常用到的几个方法是

createDocumentFragment()－－创建文档碎片节点

createElement(tagname)－－创建标签名为tagname的元素

createTextNode(text)－－创建包含文本text的文本节点

createElement()、createTextNode()、appendChild()


2    <head>

3        <title>createElement() Example</title>

4        <script type="text/javascript">

5            function createMessage() {

6                var oP = document.createElement("p");

7                var oText = document.createTextNode("Hello World!");

8                oP.appendChild(oText);

9                document.body.appendChild(oP);

10            }

11        </script>

12    </head>

13    <body onload="createMessage()">

14    </body>

15</html>
``
removeChild()、replaceChild()、insertBefore()

删除节点

1<html>

2    <head>

3        <title>removeChild() Example</title>

4        <script type="text/javascript">

5            function removeMessage() {

6                var oP = document.body.getElementsByTagName("p")[0];

7                oP.parentNode.removeChild(oP);

8            }

9        </script>

10    </head>

11    <body onload="removeMessage()">

12        <p>Hello World!</p>

13    </body>

14</html>

替换

1<html>

2    <head>

3        <title>replaceChild() Example</title>

4        <script type="text/javascript">

5            function replaceMessage() {

6                var oNewP = document.createElement("p");

7                var oText = document.createTextNode("Hello Universe!");

8                oNewP.appendChild(oText);

9                var oOldP = document.body.getElementsByTagName("p")[0];

10                oOldP.parentNode.replaceChild(oNewP, oOldP);

11            }

12        </script>

13    </head>

14    <body onload="replaceMessage()">

15        <p>Hello World!</p>

16    </body>

17</html

新消息添加到旧消息之前

1<html>

2    <head>

3        <title>insertBefore() Example</title>

4        <script type="text/javascript">

5            function insertMessage() {

6                var oNewP = document.createElement("p");

7                var oText = document.createTextNode("Hello Universe!");

8                oNewP.appendChild(oText);

9                var oOldP = document.getElementsByTagName("p")[0];

10                document.body.insertBefore(oNewP, oOldP);

11            }

12        </script>

13    </head>

14    <body onload="insertMessage()">

15        <p>Hello World!</p>

16    </body>

17</html>

createDocumentFragment()

一旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如想创建十个新段落

1<html>

2    <head>

3        <title>insertBefore() Example</title>

4        <script type="text/javascript">

5            function addMessages() {

6                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];

7               

8                var oFragment = document.createDocumentFragment();

9               

10                for (var i=0; i < arrText.length; i++) {

11                    var oP = document.createElement("p");

12                    var oText = document.createTextNode(arrText[i]);

13                    oP.appendChild(oText);

14                    oFragment.appendChild(oP);

15                }

16               

17                document.body.appendChild(oFragment);
                                                   
18                                                 

19            }

20        </script>

21    </head>

22    <body onload="addMessages()">

23

24    </body>

25</html>

获取偏移量

1 获取元素偏移量

1 获取元素

var box2 = document.querySelector('.box2') 2 获取相对父级元素

语法：元素.offsetParent

3 获取元素偏移量

box2.offsetLeft

box2.offsetTop

2 获取窗口偏移量

window.innerXXX ---> 计算时会包含浏览器的滚动条/ xxx=hight/width
document.documentElement.clientXXX ---> 计算时不会计算滚动条(只计算浏览器的可视区域)

JavaScript的事件

1 js事件

事件：在某一个时刻, 用户(在页面)做了某一件事, 我要给出的反馈
事件的三要素

事件源
事件类型
事件处理函数

DOM 0级事件绑定事件源.on + 事件类型 = 事件处理函数弊端: 无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件
DOM 2级事件绑定(事件监听) 事件源.addEventListener('事件类型', 事件处理函数, 第三个参数是可选的

2 浏览器事件

滚动事件 var oDiv = document.querySelector('div')

window.onload = function () {

var oDiv = document.querySelector('div')}

当页面所有资源加载完毕时执行

3 鼠标事件

<div class="sBox"></div>
*JS 的鼠标事件
var oDiv = document.querySelector('div')

左键单击
oDiv.onclick = function () {
console.log('单击元素时触发')
}
双击事件 300ms 内连续点击两次鼠标
oDiv.ondblclick = function () {
console.log('双击元素时触发')
}
右键事件鼠标右键单击
oDiv.oncontextmenu = function () {
console.log('鼠标右键单击时触发')}
鼠标按下事件鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
oDiv.onmousedown = function () {
console.log('鼠标按下时触发')
}
鼠标抬起事件鼠标左键抬起的时候会触发的
oDiv.onmouseup = function () {
console.log('鼠标抬起时触发')
}
鼠标移入事件鼠标的移动到元素内部时触发
oDiv.onmouseover = function () {
console.log('onmouseover 鼠标移入时触发')
}
鼠标移出事件鼠标移动出元素内部时触发
oDiv.onmouseout = function () {
console.log('onmouseout 鼠标移出时触发')
}
鼠标移动事件鼠标在元素内部移动时触发
oDiv.onmousemove = function () {
console.log('鼠标移动时触发')
}
鼠标移入事件2
oDiv.onmouseenter = function () {
console.log('onmouseenter 鼠标移入事件2')
}
鼠标移出事件2
oDiv.onmouseleave = function () {
console.log('onmouseleave 鼠标移出事件2')
}

onmouseover onmouseout 两个方法移入元素和移入元素子盒子时都会触发 onmouseenter onmouseleave 两个方法只会在移入元素时触发

3 键盘事件

键盘事件：
onkeyup 键盘抬起
onkeydown 键盘按下
onkeypress 键盘抬起按下
键盘按键 e.key==》返回按下的按键
e.keyCode 已被移除但是很多浏览器还在用

组合键
if(e.ctrlKey && e.key =='a'){
console.log('此时按下了ctrl+a键');

表单事件：
文本框：< input type="text" class="inp">
inp.onfocus = function(){
console.log('获得焦点');
}
onblur 失去焦点
onchange 内容改变时触发
oninput 输入内容时触发

事件对象：
oDiv.onclick=function(e){
console.log(e);
对于事件源鼠坐标
console.log('相当于事件x轴',e.offsetX);
console.log('相当于事件Y轴',e.offsetY);
相当于页面的坐标
console.log('相当于页面X轴',e.pageX);
console.log('相当于页面Y轴',e.pageY);
相对于浏览器窗口的坐标
console.log('相对于浏览器窗口的X轴',e.clientX);
console.log('相对于浏览器窗口的Y轴',e.clientY);
}
作业例子：
< p class="X">坐标X:</ p >
< p class="Y">坐标Y:< /p>
< script>
//获取x和y的参数
// 鼠标移动参照物是html页面
//调用鼠标移动位置让其显示在XY
var oX=document.querySelector('.X')
var oY=document.querySelector('.Y')
var oHtml=document.documentElement
console.log(oHtml);
oHtml.onmousemove = function(e){
oX.innerHTML=坐标X:${e.pageX};
// console.log(oX);
oY.innerHTML=坐标Y:${e.pageY};
}
< /script>
鼠标在页面上移动时页面显示出鼠标位置

获取键盘位置：
键盘按键
e.key ===> 返回按下的按键
e.keyCode ===> 返回按下的按键的进制码
keyCode 已经被移除, 但是很多主流浏览器还支持使用
var inp = document.querySelector('#inp')
inp.onkeyup = function (e) {
console.log(e)
if (e.ctrlKey && e.key == 'a') {
console.log('此时按下了 ctrl健和 a键')
}
}

4 事件传播

< div id="box1">< div id="box2"></ div>< /div>
< script>
事件传播
在当前案例中, 点击了 box2 的区域相当于点击了 box1 内部的空间在触发子元素的事件时, 会将行为传播给父级的同类型事件触发了子元素的点击事件时, 会将该行为传播给父级, 并触发父级的同类型事件在传递行为时, 会将行为一直向上传递, 如果父级有同类型事件, 那么触发该事件如果没有, 则继续往上传递

阻止事件传播: e.stopPropagation()
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var myBody = document.body

box1.onclick = function (e) {
e.stopPropagation() // 阻止事件传播
console.log('触发了 box1 的点击事件')
}

box2.onclick = function () {
console.log('触发了 box22222 的点击事件')
}

box1.oncontextmenu = function () {
console.log('触发了 box1111111 的右键事件')
}

myBody.onclick = function () {
console.log('触发了 body 的点击事件')
}

5 目标冒泡捕获

目标: 目标就是事件源
传播时会从目标传播到父级, body, html, document, window
window 默认的传播方式为冒泡
冒泡: 事件传播时, 从目标开始传播, 一直到到父级, body...window
捕获: 从最顶层开始, 逐层向下传递, 一直到目标
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var myBody = document.body
box1.onclick = function (e) {
console.log('触发了 box1 的点击事件')
}
捕获的话需要传递第三个参数为 true addEventListener 第三个参数默认值为 false 代表传播方式为冒泡
box1.addEventListener('click', function () {
console.log('触发了 box1 的点击事件')
}, true)

事件委托：
< ul>
< li>1< /li>
< li>2< /li>
< li>3< /li>
< /ul>

var myUl = document.querySelector('ul')
var myLi = [...document.querySelectorAll('li')]
myLi[0].onclick = function () {
console.log('111111111111')
}
myLi[1].。。。
myLi[2].。。。
此时页面还没有第4个li, 所以此处不能这样使用
myLi[3].onclick = function () {
console.log('33333333333333')}
此时页面只有 3 个 li, 所以新插入的li没有点击事
myLi.forEach(function (item, index) {
item.onclick = function () {
console.log(index + 1)}
})

JavaScript基础知识进阶（DOM方面）

JavaScript进阶进阶

cookie

1 cookie作用

2 本地存储的区别

DOM

获取DOM的方法

1 常规获取

1.1 通过 类名 去获取 标签

1.2 通过 标签名 去获取标签

1.3 通过 ID名 去获取标签

2.1 按照选择器的形式 获取标签满足条件的第一个

2.2 按照选择器的形式 后去所有满足条件的标签

2 非常规获取

innerHTML和innerText

1获取属性

2 操作元素的属性

元素属性的获取设置与移出

1 获取元素

2. 获取元素的某些属性

3. 设置元素的某些属性

4. 移出元素的某个属性

JavaScript操作DOM元素属性和方法

获取偏移量

1 获取元素偏移量

2 获取窗口偏移量

JavaScript的事件

1 js事件

2 浏览器事件

3 鼠标事件

3 键盘事件

4 事件传播

5 目标冒泡捕获

1.1 通过类名去获取标签

1.2 通过标签名去获取标签

1.3 通过 ID名去获取标签

2.1 按照选择器的形式获取标签满足条件的第一个

2.2 按照选择器的形式后去所有满足条件的标签