JS-DOM
2020-04-29 15:53:37 3 举报AI智能生成
个人前端学习
作者其他创作
大纲/内容
JS-DOM。DOM:文档对象模型：1、Document2、object3、Model
DOM操作
节点类型
(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()来获取文档片段；
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程
$就是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\
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.outerText: 打印标签中的内容不包括标签ele.outerText=\"<p></p>\"标签会被打印出来，并取代原来的标签
遍历节点
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选择器的一个元素
querySelectorAll（）返回文档中匹配指定CSS选择器的一组元素
操作节点的方法
appendchild:为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。如果添加的是新创建的节点，那么是在指定元素节点的最后一个子节点之后添加这个节点；如果添加的是已经存在的一个节点，那么是把这个节点移动到指定元素节点的最后一个子节点之后。
insertBefore() 在指定的已有子节点之前插入新的子节点。传两个参数，第一个是新节点，第二个是要插入到哪个节点前面。如果要插到最后，第二个参数传null。【实现了与appendChild()一样的功能】返回值是新插入的节点。这个方法可以将新节点插入到任意位置。【插入到第一个子节点之前可以用firstElementChild，插入到最后一个子节点之前可以用lastElementChild】
replaceChild(要插入的节点，被替换的节点）；返回被替换的节点；
cloneNode(boolean); 创建节点的拷贝，返回该副本；参数默认为false，如果写true，则为深度复制（包括子节点全部复制）
normalize()合并相邻的文本节点，移除空的文本节点
splitText(n)-按照指定的位置把文本节点分割为两个节点-返回新的文本节点参数n：节点node从索引n开始拆分，但不包括索引n【索引n从0开始】
删除节点
removeChild():删除某个节点中指定的子节点，removeChild()必须有参数
属性
属性分类
property为HTML固有属性，事先已经有的绑定的原始属性
attribute为在HTML元素上自定义的属性，后期定义的属性；自定义属性在固有属性列表里是不存在的。
使用div.attributes可以获取div的所有属性【包括固有属性和自定义属性】，返回的是NamedNodeMap这样一个对象。
如果定义同名的自定义属性，后定义的会被删除掉，只显示先定义的
属性名即使给了大写也会被转为小写
获取自定义属性的值div.attributes.getNamedItem('xxx').nodeValue或者下面那种div.attributes['xxx'].nodeValueattributes 属性返回指定节点的属性集合，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就行，不管写了什么。
常见的字符串属性：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、 langstyle ：可以定义元素的样式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\
【注意：1、setAttribute方法必须要有两个参数2、如果value是字符串，需加引号3、setAttribute（）有兼容性问题】
删除属性语法：ele.removeAttribute(\"attribute\")功能：删除ele上的attribute属性说明：1、ele是要操作的dom对象2、attribute是要删除的属性名称
DOM事件
事件绑定
HTML事件：直接在HTML元素标签内添加事件，执行脚本。
鼠标事件1onload：页面加载时触发onclick：鼠标点击时触发onmouseover：鼠标滑过时触发onmouseout：鼠标离开时触发onfoucs：获得焦点时触发onblur：失去焦点时触发onchange：域的内容改变时触发
事件类型：onfocus和onbluronfocus用于表单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、onkeydown2、onkeypress3、onkeyup
0 条评论
回复 删除
下一页
