DOM基本概念节点类型节点样式事件1基本概念DocumentObjectModelDocumentObjectModelBOM：与浏览器交互的方法和接口DOM：处理网页内容的方法和接口——HTML和XML窗口的应用程序编程接口是BOM的核心对象，窗口上的文档是DOM的核心。任何HTML或XML文档都可以用DOM表示为由节点组成的层次结构。使用HTMLTreeGenerator扩展程序，您可以查看任何网页的DOM结构。DocumentElementhtmlElementheadElementtitleElementbodyTextHelloWorld!documentis根节点类型为Document根节点有一个唯一的子节点html，我们称之为文档元素documentElement，类型为Elementconsole.log(document);console.log(document.文档元素);可以看到document返回的是一个完整的文档，documentElement只是html节点2一共有12种节点，这里只对NodeDocumentElementTextCommentCDATASectionDocumentTypeDocumentFragmentAttr2.1节点类型做部分介绍节点类型所有节点类型都继承Node类型，所以所有节点类型基本属性和方法相同console.dir(Document)console.dir(Text);console.dir(DocumentFragment);其他节点类型参考Node类型2.1.1节点类型属性节点类型静态属性Node.DOCUMENT_NODE:9Node.ELEMENT_NODE:1Node.TEXT_NODE:3Node.COMMENT_NODE:8Node.CDATA_TYPE_NODE:4Node.DOCUMENT_TYPE_NODE:10Node.DOCUMENT_FRAGMENT_NODE:11Node.ATTRIBUTE_NODE:2节点信息baseURL:节点绝对基地址，相当于location.hrefisConnected:是否连接DOM树nodeName:当前节点namenodeValue：返回或设置当前节点的值默认情况下，document节点返回null，对于text、comment、CDATA返回文本内容，对于attribute返回属性的属性值nodeType：返回节点的值按照上面的对应关系console类型。log(document.nodeType);//9console.log(document.documentElement.nodeType);//1ownerDocument：返回当前节点的顶级文档对象textContent：返回当前节点和所有子节点的文本内容，includingscripttagsDOCTYPE类型的不可见脚本文档返回空节点关系childNodes：返回子节点的类数组对象NodeList，会及时更新firstChild：第一个子节点lastChild：最后一个子节点previousSibling：上一个兄弟节点nextSibling：下一个兄弟节点parentNode：返回父节点parentElement：返回父元素，nodeType不为1时返回null父节点已经存在，直接将节点移动到末尾insertBefore(newNode,referenceNode)：在节点前插入指定位置,如果它已经存在，只移动而不添加[1])console.log(document);cloneNode(deep)：克隆一个节点副本，deep为true时，同时克隆子节点replaceNode(newChild,oldChild)：替换当前节点的一个子节点并返回被替换的节点removeChild(child)：删除当前节点的一个子节点并返回该节点normalize()：节点归一化，删除空文本节点，合并相邻文本节点节点信息hasChildnodes()：当前节点是否有子节点contains(otherNode)：节点参数是否为该节点的子节点，是否包含isEqualNode(otherNode)：两个节点是否相等compareDocumentPosition(otherNode)：位置关系参数节点和节点之间返回值：1-不在同一文档中，2-之前，4-之后，8-包含，16-包含，32-待定。这些值会累加，当包含otherNode时，就是16+4=20命名空间不起作用lookupPrefix():同上isDefaultNamespace(URI):是否为默认命名空间2.2文档类型文档object在浏览器中是HTMLDocument的一个实例，HTMLDocument继承Document，document可以使用Document类型上的属性和方法2.2.1Documentbody上的属性：getreferenceto
doctype：getreferencetohead：引用head文档信息title：读取或修改浏览器标题，无修改title元素cookie：返回分号分隔的cookie列表，可写连续赋值不会被覆盖，但相当于添加操作，添加expires=expirationtime到过期时间readyState:文档加载状态lastModified:文档的最后修改时间scripts:返回所有脚本元素images:返回文档图片列表links:返回所有超链接列表tinthedocumentforms:返回所有bento元素plugins:返回插件列表activeElement:返回焦点元素charaterSet:返回当前文档的字符编码compatMode:表示当前文档模式是怪异模式还是标准模式designMode:on|off，控制文档是否可以编辑节点信息children：相对于childNodes，不包括文本节点和注释childElementCount：相当于children.lengthfirstElementChild：第一个元素节点lastElementChild：最后一个元素节点previousElementSiblingnextElementSibling2.2.2Document与Node比较的方法adoptNode(externalNode)：从其他文档中切出一个节点并导入当前文档，可用于iframe操作imporNode(externalNode,deep)：从其他文档中复制一个节点导入到当前文档中，是否深拷贝子节点..):在开头插入replaceChildren(...):用新的文档集合替换原来的文档集合documentwriteopen():打开一个文档write('html'):写入内容write('html'):写入内容并换行close()：关闭文档创建节点createElement(tagName)：返回新创建的元素createElementNS(namespaceURI,qualifiedName)：返回指定命名空间U的元素注册机和限定名createTextNode(data):返回一个文本节点createComment(data):返回一个注释节点createCDATASection(data):返回一个CDATA片段节点createDocumentFragment():返回一个空白文档片段DocumentFragments是DOM节点但不是DOM节点的一部分DOM树，文档片段存储在内存中，子节点插入文档片段不会造成页面回流，性能好getElementById(id):指定id的节点getElementsByClassName(class):指定类名节点NodeListgetElementsByName(name):指定名称的节点NodeListgetElementsByTagName(tag):指定标签名getElementsByTagName(namespace,tag):标签集合q在指定的命名空间下uerySelector(selectors)：返回指定一组CSS选择器匹配的第一个元素2.3.1元素属性的属性节点信息：返回元素所有属性节点的实时集合id：节点属性className：类属性值tagName：标签名-大写元素大小clientHeight/Width：content+paddingoffsetHeight/Width:border+clientscrollHeight/Width:当没有滚动条时，元素content的大小，和client一样，不计算border元素位置clientLeft/Top:边框宽度offsetLeft/Top:the元素边框到offsetParent边框的距离scrollLeft/Top:scrolling元素内容innerHTML常用于documentElement:与textContent相比，玩不起hidden文本并将触发回流。写文本时避免使用outerHTML：innerHTML+this元素，可以处理一些2.3.2Element连同自身的方法操作nodeafter(...nodes)：在其父元素的子节点列表中插入一个节点before(...nodes)append(...nodes)perpend(...nodes)remove():从所属的DOM树中删除get属性hasAttribute(name):是否有属性hasAttributeNS(namespace,name):元素是否包含指定元素getAttribute(name):返回元素属性值getAttributeNames():返回元素属性名数组getAttributeNode(name):返回指定元素的指定属性节点getAttributeNodeNS(namespace,name)：通过namespaceURI和namesetAttri获取属性节点属性操作butNode(attr)removeAttributeNode(attrNode)2.4文本类型appendData(text)：在末尾添加文本deleteData(offset,count)：从偏移位置删除count个字符replaceData(offset,count,text)：替换为从偏移位置到的文本文本在偏移量+计数insetData(offset,text):从偏移量插入文本splitText(offset):在偏移量位置拆分为两个文本节点substringData(offset,count):从偏移量到偏移量+计数提取文本3个元素.attr：读取并设置元素的样式3.1样式上的方法getPropertyValue(name)：返回属性值getPropertyPriority(name)：检查是否使用importantremoveProperty(name)setProperty(name,value,priority)3.2计算样式getComputedStyle(elem,pseudoElt):返回页面显示元素的最终样式对象计算atingmovement的bug，计算方式可以解决这个问题4EventDOM事件流捕获阶段：从根节点搜索到达目标：找到目标事件冒泡阶段的目标元素：从目标元素向上传递事件进行绑定DOM事件对象事件类型4.1事件绑定constoBtn=document.getElementsByTagName('button')functionhandle(){console.log('event1');}oBtn[0].addEventListener('click',handle)oBtn[1].onclick=()=>{console.log('事件2');oBtn[0].removeEventListener('click',handle)console.log('unbindevent1');}如果需要解除绑定，不能使用匿名函数4.2DOM事件对象事件对象是传递给事件处理器的唯一参数事件冒泡的属性：是否冒泡；methodofeventPhase：事件处理的第一阶段3type：事件类型target：事件目标事件的方法preventDefault()：防止默认行为stopPropagation()：取消所有后续事件捕获或事件冒泡stopImmediatePropagation()：取消所有后续事件捕获或事件冒泡，并防止调用任何后续事件处理程序。这始终指向currentTarget，即事件目标。