首页  思维导图  详情

JS-DOM

2020-04-29 15:53:37   3  举报





AI智能生成

个人前端学习

作者其他创作

大纲/内容

DOM操作

初识别DOM操作 1.认识DOM(Document Object Model) DOM1级:(1)DOM Core:如何映射基于XML的文档结构,简化对文档任何部分的访问和操作 (2)DOM HTML:在(1)基础上加以扩展,添加了针对HTML的对象和方法 DOM2级:(1)DOM Views(DOM视图):定义了跟踪不同文档视图的接口 (2)DOM Events(DOM事件):定义了事件和事件处理的接口 (3)DOM Style:定义了基于CSS为元素应用样式的接口 (4)DOM Traversal and Range(DOM遍历及范围):定义了遍历和操作文档数的接口 DOM3级:(1)DOM Load And Save:引入了以统一方式加载和保存文档的方法 (2)DOM Validation:验证文档的方法

节点类型

(1)Element(元素节点):数值常量1;字符常量ELEMENT_NODE (2)Attr(属性节点):数值常量2;字符常量ATTRIBUTE_NODE (3)Text(文本节点):数值常量3;字符常量TEXT_NODE (4)Comment(注释节点):数值常量8;字符常量COMMENT_NODE (5)Document(文档节点):数值常量9;字符常量DOCUMENT_NONE (6)DocumentType(文档类型节点):数值常量10;字符常量DOCUMEN_TYPE_NONE (7)DocumentFragment(文档片段节点):数值常量11;字符常量DOCUMEN_FRAGMENT_NONE 除IE以外所有浏览器都能访问，IE只支持数值常量

元素节点类型的判断方法 1、isElement：某个节点是否为元素节点 2、isHTML：是否为HTML文档的元素节点 3、isXML：是否为XML文档的元素节点 4、contains：两个节点的包含关系

/window.Node，是查看window里是否有这么一个Node对象 //obj instanceof Node，是说明obj是否是Node对象的一个实例， 即是不是new Node出来的 if(window.Node&&(obj instanceof Node)){

testDiv.appendChild(obj)； //把要检验的obj作为子节点添加给testDiv节点

testDiv.removeChild(obj)； //把testDiv中为obj的子节点移除

文档类型

子主题

XML用于存放格式化数据，其中的很多标签都属于自定义标签，浏览器并不认识标签，Html适用于显示数据

nodetype

节点类型最常用的还是元素节点，属性节点，文本节点 IE浏览器没有内置Node，需使用数值常量，数值常量可兼容所有浏览器 判断节点类型

nndeName/Value

nodeName获取节点名称，nodeValue获取节点的值 attributes属性可获得节点的所有属性； childNodes可获得节点的所有子节点； document.body获得body对象，然后用document.body.childNodes[0]获得body的第二个子元素，原因是其第一个子元素是<body>到之间的空白部分，第二个子元素才是注释部分； doctype对象不需要获取，直接在控制台中打印document.doctype就可以了； 文档片段节点：用document.creareDocumentFragment()来获取文档片段；

domready：HTML标签通过浏览器解析变成DOM节点，当页面上所有HTML都转换为节点，DOM树构建完, 简称之domReady。

渲染引擎的渲染流程 (1)解析HTML构建DOM树(构建DOM节点): 渲染引擎开始解析HTML并将标签转化为内容树的DOM节点. (2)构建渲染树(解析样式信息): 解析外部的CSS文件以及style标签中的样式信息,渲染树由 一些包含有各种属性的矩形组成,它们将被按照正确的顺序显示在 屏幕上. (3)布局渲染树(布局DOM节点): 执行布局的过程,它将确定每个节点在屏幕上的确切左边 (4)绘制渲染树(绘制DOM节点): 绘制即遍历渲染树,并使用UI后端层来绘制每个节点 并不包含解析过程中加载外部资源,如:图片、脚本、iframe等一些过程 上面四步仅仅是HTML结构的渲染过程

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程

click()和onclick()的区别： 1.onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。 2.click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外，如果在click括号内定义了其他可执行语句，则click方法会在执行完onclick事件之后执行括号内部的语句。 我们还可以注意到：onclick是事件，而click是方法，两者是不同的概念。

$就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素。 $在JS中本身只是一个符号而异，在JS里什么也不是。 但在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常之频繁，所以好多新手不知道，还以为$是JS的什么特殊语法。 后来，可能有些程序员JQUERY用得多了，发现$这个函数很好用，很方便，所以，在不用JQUERY的情况，一般自己也会自定义一个$函数。

avascript + query 说白了就是一些javascript代码而已，对外提供一些接口，让程序员不用再关注javascript烦人的语法和n多的要记住的东西。 jquery是对javascript的一种封装，也就是它把一些具体的实现写好了，你只需要调用它就可以了。 你下载下来就会发现，它本身就是js代码，说白了它本身就是javascript代码。只是把一些经常用到的方法或者叫实现给写出来了，程序员就不用再去费脑子写那些实现了，调用一下就可以了。

创建节点

// 基础创建方法： // 第一步：获取ul对象： var ul = document.getElementById("myList_1"); // 第二步：创建li标签： var li = document.createElement("li"); // 第三步：把新创建好的li放入到ul里： ul.appendChild(li); // 第四步：创建一个文本节点并传入一个文本内容： var text = document.createTextNode("新闻"); // 第五步：把创建好的文本节点放入到li里： li.appendChild(text);

// 带有documemt.createDOocumentFragment()以及document.createComment()方法： // 第九步：创建注释节点： var comment = document.createComment("————这是注释———"); // 第六步：创建文档片段： var fragment = document.createDocumentFragment(); // 第一步：获取ul对象： var ul2 = document.getElementById("myList_2"); // 第二步：创建一个空的li： var li2 = null; // 第三步：通过for循环创建三个li： for(var i=0;i<3;i++) { // 第四步：为li变量赋值，通过document.createElement创建li节点： li = document.createElement("li"); // 第五步：给li传入文本节点 li.appendChild(document.createTextNode("Item"+(i+1))); // 第七步：将li放入文档片段里： fragment.appendChild(li); // 第八步：将文档片段放入ul里： ul.appendChild(fragment); // 第十步：将注释插入到ul上方： document.body.insertBefore(comment,document.body.firstChild); // 第二个参数实际上就是获取到的变量ul2 }

document.createElement还能支持创建当前浏览器不支持的标签名，在IE6~8下，这是一个著名的hack。 document.body.insertBefore(要插入到前面的节点,要插入的节点所在位置); document.createDocumentFragment()创建文档片段：文档片段就是来帮助我们，把创建的一大堆新元素都放在文档片段中，然后提交给文档中。 特别注意两个点： 当把文档片段插入DOM树的时候，只会把它的子节点插进去，它作为容器本身是不会进入DOM树的。 当把DOM树中的节点插入文档片段的时候，这些节点，会真的从DOM树种消失。我们也把这个过程叫做劫持。 类比的话，就好像自助餐厅，文档片段是我们的托盘，先在取餐区里面把想要的东西都放在托盘里面，也可以把自己桌子上已经有的东西放在托盘里，再把托盘里的全部东西都放在饭桌上，当然托盘本身不需要的 对性能提升很有帮助哦，也可以减少重排。

document.createElement()可创建元素节点 document.createTextNode()可创建文本节点 document.createDocumentFragment()可创建文档片段 document.createComment()可创建注释节点

ele.outHTML;包括节点ele及其内部所有节点内容；ele.innerHTML="a";将包括节点ele及其内部所有节点内容变为a

tips： 1）script中innerHTML添加的内容最前面如果有空格，IE浏览器会将空格去掉；而chrome不会 2）defer;行内属性，该属性规定在页面加载完之后再执行script脚本，只在IE浏览器中有效 3）大多数浏览器不支持在innerHTML=中插入script标签，只有IE8及更早的IE版本有效，1、不过要在<script defer>内添加defer属性；2、且必须是有作用域的元素(即插入的元素内必须有内容，随便插入点内容就行，如_)，也可以使用<input type=\"hidden\";的方式为其添加内容

ele.innerText: 打印标签中的内容不包括标签，从起始位置到终止位置的所有文本内容, 但它去除Html标签。 ele.innerText=""标签会被打印出来

ele.outerText: 打印标签中的内容不包括标签 ele.outerText=""标签会被打印出来，并取代原来的标签

遍历节点

firstChild：第一个子节点 lastChild：最后一个子节点 parentNode：父节点 nextSibling：下一个紧挨的兄弟节点 previousSibling:上一个紧挨的兄弟节点 childNodes[1]或者 childNodes.item(1) 查找第几个子节点

区分firstChild和childNodes的区别 firstChild表示第一个子节点，这个子节点包括元素节点，文本节点或者注释节点 childNodes 返回节点的子节点集合，包括元素节点、文本节点还有属性节点。

ul和第一个li之间有个空白节点，每两个li之间也有一个空白节点

documentElement属性可返回文档的根节点 tagName属性返回元素的标签名 任何节点都可以通过ownerDocument获得Document（文档节点） hasChildNodes（）：判断某个节点是否含有子节点

你好，可以参考下面的结构： li-->ul-->div-->body-->html-->document 所以通过li找到document需要使用5次parentNode父节点。

使用childElementCount返回的是所有元素子节点，需要注意的是返回的是直接子元素节点，不是后代元素节点

NodeList对象

Array.prototype.slice.call(nodeList); 而calll()方法的作用就是帮助一个对象去调用另一个对象的方法。 所以这句代码可以简单的理解为，通过call（）方法，让nodeList能够使用数组的slice的方法。

1.在js中，Array是创建数组的一个全局对象，你可以理解为它是所有数组的一个祖先。所有的对象，都会存在一个prototype，意思是原型，slice就是Array原型上面的方法。 2.NodeList对象是一个节点的集合，不是一个数组，因此NodeList并没有slice这个方法。

HTMLCollection类数组对象

docment.scripts 返回页面中全部scripts的元素集合 document.links 返回页面中全部的 a元素的集合 document.images 返回页面中全部img（图片元素）的集合 document.forms 获取的是表单元素的集合 tr.cells 获取的是tr中所有td元素的集合 select.options 返回select中的所有选项

可以在控制台看到他们的_proto_（原型的意思）都是类数组对象HTMLCollection

cells.namedItem('td') 查找是否有id为td的td元素第一个并返回，若没有，查找name为td的第一个td元素并返回

类数组对象NamedNodeMap

用ele.attributes方法 类数组对象NamedNodeMap 返回的是元素属性的集合 可以得到元素attribute（属性）集合 可用方法：.length 数组长度 .item() 、[] 两种方式可获取其中某个属性，从0开始索引。

类数组对象的动态性 -NodeList，HTMLCollection，NameNodeMap三个集合都是动态的，是有生命、有呼吸的对象 -它们实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应这些对象中 -每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息 为解决动态性带来的死循环，先计算出长度保存到变量中，再增加新的元素；

获取节点

getElementById()和getElementsByName()这两个方法调用时前面必须是document，其他方法调用时前面可以是document也可以是元素节点。

getElementById()方法 若有两个ID相同的元素，始终只能获取到第一个

etElementById() 通过id获取节点，只能用document对象调用。IE6～8也可以使用，但在IE8以下存在一个bug：若name属性和id属性的内容相同，则浏览器会自动取先出现的属性，所以有可能会取到name属性，而不是id属性，该bug只在IE8版本以下的浏览器出现。

//首先封装一个函数通过ID获取元素 var getElementByID = function(id){ var el = document.getElementById(idValue); if(!+"/v1"){ //在IE浏览器中，/v不会被编译，/v1=v1，用+号连接后返回值为NaN，!NaN为true。 //而在其他浏览器中，/v编译为空格，/v1=1，!1为false。 if(el&&el.id===id){ //查收是否包含id的元素 return el }else{ var els = document.all[id]; //遍历所有包含id参数的元素，然后进行逐个匹配 n = els.length; for(var i = 0;i<n;i++){ if(els[i].id===id){ return els[i]; } } } } return el; }

getElementByName（）返回对象的集合只能通过document对象调用， getElementsByName在IE6和OPERA 7.5下有bug，他们会返回ID值为给定值的元素，其次他们仅仅返回input和img元素 getElementsByName（） 返回的结果是一个集合

getElementsByTagName()参数不区分大小写，返回集合 nodeValue可以获取文本内容 getElementsByTagName('!') 获取注释 ----IE到IE8才能使用 getElementsByTagName('*') 获取所有元素

getElementsByClassName()方法 该方法可返回带有指定类名的对象的集合，如果要获取某个元素的话，一定要带上下标。

querySelector（）返回文档中匹配指定CSS选择器的一个元素

目前主流浏览器基本都支持这两个属性【如果找不到匹配的元素则返回null】 querySelectorAll()和querySelector()方法返回的是一个静态的NodeList,所谓静态NodeList就是对底层document的更改不会影响到返回的这个NodeList对象.此时返回的NodeList只是querySelectorAll()方法被调用时的文档状态的快照。

querySelectorAll（）返回文档中匹配指定CSS选择器的一组元素

操作节点的方法

appendchild:为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。 如果添加的是新创建的节点，那么是在指定元素节点的最后一个子节点之后添加这个节点；如果添加的是已经存在的一个节点，那么是把这个节点移动到指定元素节点的最后一个子节点之后。

insertBefore() 在指定的已有子节点之前插入新的子节点。 传两个参数，第一个是新节点，第二个是要插入到哪个节点前面。 如果要插到最后，第二个参数传null。【实现了与appendChild()一样的功能】 返回值是新插入的节点。 这个方法可以将新节点插入到任意位置。【插入到第一个子节点之前可以用firstElementChild，插入到最后一个子节点之前可以用lastElementChild】

replaceChild(要插入的节点，被替换的节点）； 返回被替换的节点；

cloneNode(boolean); 创建节点的拷贝，返回该副本； 参数默认为false，如果写true，则为深度复制（包括子节点全部复制）

normalize()合并相邻的文本节点，移除空的文本节点

splitText(n) -按照指定的位置把文本节点分割为两个节点 -返回新的文本节点 参数n：节点node从索引n开始拆分，但不包括索引n【索引n从0开始】

删除节点

removeChild():删除某个节点中指定的子节点，removeChild()必须有参数

removeNode():IE的私有实现,将目标节点从文档中删除，返回目标节点,参数是布尔值，默认值是false。如果参数为true，不仅删除父元素也删除子元素

属性

属性分类

property为HTML固有属性，事先已经有的绑定的原始属性

attribute为在HTML元素上自定义的属性，后期定义的属性；自定义属性在固有属性列表里是不存在的。

使用div.attributes可以获取div的所有属性【包括固有属性和自定义属性】，返回的是NamedNodeMap这样一个对象。

如果定义同名的自定义属性，后定义的会被删除掉，只显示先定义的

属性名即使给了大写也会被转为小写

获取自定义属性的值 div.attributes.getNamedItem('xxx').nodeValue或者下面那种 div.attributes['xxx'].nodeValue attributes 属性返回指定节点的属性集合，getNamedItem（）方法可返回指定的属性节点，只能访问显示定义的属性，比如id没在上面写出，用该方法访问报错

删除自定义属性 div.attributes.removeNamedItem("yyy");

创建一个自定义属性 var attr = document.createAttribute("data-title"); attr.value="ddd"; div.attributes.setNamedItem(attr);

getAttribute（）可以获得指定属性名的属性值（自定义属性或固有属性）

div.setAttribute(属性名，属性值)；为指定的节点设置属性和属性值； 既可以创建新的属性值，也可以修改已有值；

使用removeAttribute('属性名')可以移除自定义属性，但固有属性无法移除。

自定义属性是无法通过 console.log（【对象.属性】）这个方法来获取的，打印结果会是undefined。 若固有属性没赋值，则返回默认值。

getNameItem()获得属性 removeNamedItem（）移除属性 setNamedItem（）创建属性

其他属性

布尔属性 inputs[0].checked = "checked" 或者inputs[0].checked = true 效果都一样，因为他会进行隐式转换，将 "checked" 字符串转为布尔值true，所以这个字符串只要能转成true就行，不管写了什么。

布尔属性：即你不管把属性值设置成什么，都会自动的转化为true 或者 false , 不推荐此方法 IE7及以下不支持 如：checked ( 默认选中 , 一般用于checkbox) selected ( 默认选中 ,一般用于option) readOnly（O必须大写） (不能修改默认值 , 但不影响数据传输 , 后端仍然可以获得该数据) disabled （提交后后端不会获得该数据） multiple ( 多选 , 按住ctrl和shift可以多选) hidden ( 隐藏 )；Html5新增属性 JavaScript操作这些固有属性还是用 node.prop

常见的字符串属性： id：表示元素的唯一标识（同一个页面不可出现相同id值的元素） title：可见元素，在鼠标掠过的时候提示信息 href：用于a标签link标签，表示超链接 src：用于img、radio、script等，表示数据的来源。用来引入外部的资源 lang：是language，表示辅助搜索引擎、印刷机、读音器来使用的属性；好处：协助作用（搜索引擎搜索，语音合成，符号异体字高质量印刷，选择一套引号，解决连字符绑定空格问题，拼写语法检查）【lang="zh"表示中文，lang="zh-cn"表示简体中文，lang="zh-sg"表示新加坡，hk表示香港】 dir：用于文本的输出方向（LTR【从左向右】，RTL【从右向左】），一般和bdo元素一起出现【<bdo dir="ltr"></bdo>】 accesskey：表示组合键通过键盘的快捷键使某个元素被选中，可以给元素定义一个访问它的快捷键【如：accesskey="a"，通过alt+a可选中该元素】 name ：控件名，用于表单元素 value：用于表单元素，传到后台的值，可以通过js获取 class：表示定义在元素上引用的样式，可以给某个元素添加一个样式，可以在js中通过className属性来进行动态的读取和设置某个元素的class属性

W3C全局属性：（所有HTML都永远的属性） accesskey、 class、 contenteditable是否可编辑元素的内容，一般和spellcheck组合使用 spellcheck检查编辑是否符合某一语法 hidden ：隐藏元素，通过js可以将隐藏的元素显示出来 dir、 id、 lang style ：可以定义元素的样式 tabindex规定使用“tab”建进行导航时元素的顺序 translate规定是否翻译元素内容，目前所有主流浏览器都不支持 title、dir、name、value、accesskey、class

data 新增属性 data- js中用dataset获取（浏览器设置好的）如果是data后面-，直接换成点 . 就好。如果是多个-分隔的，字符串，用驼峰来获取如data-xxx-yyy，则dataset.xxxYyy

DOM基础

JavaScript DOM基础 DOM是Document Object Model（文档对象模型）的缩写 文档对象模型（DOM）是HTML和XML文档的编程接口，它提供了对文档结构化的表述，并定义了一种方式可以使从程序中对结构进行访问，从而改变文档的结构、样式和内容。

DOM的查找方法

1、语法：document.getElementById("id") 功能：返回对拥有指定ID的第一个对象的引用 返回值：DOM对象 说明：id为DOM元素上id属性的值

举个栗子： <body> <div class="box" id="box"> 元素 </div> <script> //获取id为box的这个元素 var box=document.getElementById("box"); console.log(box); //返回 id为box的div ，若万一有两个id一样的元素，返回第一个 </script> </body>

2（加在ById后面）.document.getElementsByTagName("tag") 返回值：数组 功能：返回一个对所有tag标签引用的集合 说明：tag为要获取的标签名称

给元素设置样式

语法：ele.style.styleName=styleValue 功能：设置ele元素的CSS样式 说明： 1、ele为要设置样式的DOM对象 2、styleName为要设置的样式名称（不能使用”-“，连字符形式的属性名称使用驼峰命名形式，如：font-size写为fontSize） 3、styleValue为设置的样式值

className

获取

语法：ele.className 功能1：返回ele元素的class属性

设置

语法1：ele。className=“cls” 功能2：设置ele元素的class属性为cls

innerHTML

获取

语法：ele.innerHTML 功能：返回ele元素开始和结束标签之间的HTML

设置

语法：ele.innerHTML="html" 功能：设置ele元素开始和结束标签之间的HTML内容为html

获取DOM元素属性或添加属性

获取属性 语法：ele.getAttribute("attribute") 功能：获取ele元素的attribute属性 说明： 1、ele是要操作的dom对象 2、attribute是要获取的html属性（如：id、type） 获取标签属性语法：DOM对象.属性，如p.id

【正常获取属性只需要 dom对象.属性名 但这种方式不能获得class属性，要写成 dom对象.className 才行【也可以写成 dom对象.getAttribute("class") 】 自定义属性无法通过这种方式获得，因此需要getAttribute("")】

设置属性 语法：ele.setAttribute("attribute",value) 功能：在ele元素上设置属性 说明： 1、ele是要操作的dom对象 2、attribute为要设置的属性名称 3、value为设置的attribute属性的值

【注意：1、setAttribute方法必须要有两个参数 2、如果value是字符串，需加引号 3、setAttribute（）有兼容性问题】

删除属性 语法：ele.removeAttribute("attribute") 功能：删除ele上的attribute属性 说明： 1、ele是要操作的dom对象 2、attribute是要删除的属性名称

DOM事件

事件绑定

HTML事件：直接在HTML元素标签内添加事件，执行脚本。

鼠标事件1 onload：页面加载时触发 onclick：鼠标点击时触发 onmouseover：鼠标滑过时触发 onmouseout：鼠标离开时触发 onfoucs：获得焦点时触发 onblur：失去焦点时触发 onchange：域的内容改变时触发

//切记： 1）参数this始终表示引用的元素ele， 2）HTML中this在函数参数的位置对应script中函数的参数位置（例：在HTML中<ele function(a,this);>；this是第二个参数，那么在script中function(x,y)第二个参数y就是this; 2）因为是在HTML中调用了script内的函数，所以，script中函数的参数最终值=HTML中元素ele内设置的参数值；

事件类型：onfocus和onblur onfocus用于表单input标签type为text/password/textarea等。

onchanage事件一般作用域select或checkbox或radio 当前DOM对象若是下拉菜单时，想要获取当前选中的值时，有两种获取方式： 1、var bgcolor=this.value; 2、var bgcolor=menu(表示DOM对象).options[(DOM对象).selectedIndex].value;

代码执行顺序是从上往下的， <script></script> 一般放在body的最后， 当script在内容上面的时候可以使用windows.onload = funcition{ // 页面加载完毕后执行的内容

DOM0级事件：通过DOM获取到html元素 语法： ele.事件 = 函数名                   （不能加括号，加了括号会在页面打开时就进行） 功能： 在DOM对象上绑定事件 注意： 执行脚本可以是一个匿名函数，也可以是一个函数的调用 -->

<div class="lock" id="btn">锁定</div> <script> //获取按钮 var btn=document.getElementById("btn"); //给按钮绑定事件，this是对该DOM元素的引用 btn.onclick=function(){ //判断如果按钮是锁定，则点击后显示为解锁，变为灰色，否则显示为锁定，变为蓝色 方法一： if（this.className=="lock"）{ this.className="unlock"; this.innerHTML="解锁"； }else{ this.className="lock"; this.innerHTML="锁定"; }

方法二： if（this.innerHTML=="锁定"）{ this.className="unlock"; this.innerHTML="解锁"； }else{ this.className="lock"; this.innerHTML="锁定"; } </script>

【鼠标事件2】 -onsubmit：表单中的确认按钮被点击时发生【onsubmit事件不是加在按钮上，而是表单上。】 -onmousedown：鼠标按钮在元素上按下时触发 -onmousemove：在鼠标指针移动时发生 -onmouseup：在元素上松开鼠标按钮时触发 -onresize：当调整浏览器窗口的大小时触发 -onscroll：拖动滚动条滚动时触发

键盘事件

onkeydown：在用户按下一个键盘时发生 onkeypress：在按下键盘时发生（只会响应字母与数字符号） onkeyup：在键盘被松开时的发生 keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码。

键盘事件触发顺序： 1、onkeydown 2、onkeypress 3、onkeyup