站群seo,淘宝的关键词排名怎么查,齐齐哈尔网站设计,免费申请qq号注册新账号Node 在DOM中文档的结构是以节点来表示的#xff0c;所有的元素(对象)都叫做节点。节点有很多类型#xff0c;总的节点对象叫做Node#xff0c;Node下面具体分为10个子类型#xff0c;子类型中的CharacterData对象又进行细分。 HTML DOM Tree 实例 在DOM中#xff0c;文档… Node 在DOM中文档的结构是以节点来表示的所有的元素(对象)都叫做节点。节点有很多类型总的节点对象叫做NodeNode下面具体分为10个子类型子类型中的CharacterData对象又进行细分。 HTML DOM Tree 实例 在DOM中文档的所有组成部分都叫做Node(节点)例如HTML文件中的html、body、图片、文字、各种标签、以及标签的属性等。 Node的不同类型节点是通过NodeType来区分的。NodeType是Node接口对象的属性共有12个值 Node的属性 Node接口是多个节点类型的父接口起始定义所有节点通用的属性(包括方法属性)这些属性主要可以分为三大类属性类、判断类和操作类。 浏览器会根据加载的HTML文件自动生成相应的DOM对象这样就可以在JS中对其进行操作而Node就是所有这些生成的DOM对象的总接口换句话说浏览器生成的所有DOM对象都将包含Node中的所有属性。 1.属性类属性 Node的属性类属性又可以分为两种类型一种是可读写的另一种是只读的。可读写属性主要又三个nodeValue、textContent和userData。其中nodeValue表示节点的值例如Text节点的nodeValue就是节点本身的值。textContent表示节点所包含的文本内容例如div节点中所有子节点的文本内容就是div的textContent。userData是我们可以自己在节点上设置的值使用userData就相当于将节点看成一个普通对象然后度iqi属性进行操作。对userData的操作是使用serUserData和getUserData两个方法进行的但是这两个方法大部分浏览器现在还不支持。代码实例 body 测试结果 Node的只读属性主要包括以下几个 nodeType: 节点类型nodeName: 节点名称attributes: 节点包含的属性节点的集合parentNode: 节点的父节点childNodes: 节点的所有子节点集合firstChild: 节点的第一个子节点lastChild: 节点的最后一个子节点previousSibling: 节点的前一个节点nextSiblind节点的后一个节点ownerDocument节点所在的文档 2.判断类属性 node.isEqualNode(arg): 判断两个节点是否相等参数为Node类型node.isSameNode(other): 判断是否为同一个节点参数为Node类型node.isSupported(feature, version): 判断是否支持某个特性node.hasChildNodes(): 判断是否包含子节点node.hasAttributes(): 判断是否包含属性node.compareDocumentPosition(otherNode): 判断两个节点的相互位置关系参数为另一个节点 3.操作类属性 Node的操作类属性主要包括6个方法属性 node.appendChild(newChild)添加子节点node.cloneNode(deep): 克隆节点node.insertBefore(newChild, refChild): 在指定子节点前插入子节点node.removeChild(oldChild): 移除子节点node.replaceChild(newChild, oldChild):替换子节点node.normalize(): 规范化文档(主要是合并相邻Text节点) Element Element节点就是在文档中使用的标签例如html、body、div等标签都是Element类型的节点。Element节点主要包含tagName、attribute、attributeNode属性和getElementsByTagName方法。attribute表示节点的属性值attributeNode表示属性节点本省它们都有相应的查询获取设置和删除的方法 hasAttribute(name): 判断是否包含指定名称的节点属性getAttribute(name): 获取节点属性的值setAttribute(name,value): 设置节点属性的值removeAttribute(name): 删除指定名称的节点属性getAttributeNode(name): 按名称获取指定属性节点setAttributeNode(newAttr): 设置新属性节点removeAttributeNode(oldAttr): 删除属性节点 Attr Attr节点是表示属性类型的节点也就是我们常用的标签中的属性一共包括以下6个属性 name: 属性名value属性值ownerElement: 属性所在的Element节点spcified: 属性是否被指定如果显示设定了则返回true, 如果使用的是默认值则返回falseisId是否为Id属性这是DOM3中新增的属性浏览器支持得并不友好只有Safari可以返回正确得结果。schemaTypeInfo: 命名空间相关主要用于XML Text Text节点是表示文本类型得节点也就是我们平时直接使用得问题。它并不是直接继承得Node接口而是继承自CharacterData接口CharacterData接口继承自Node接口 Character Character接口一共包含7个属性 appendData(arg): 在尾部添加数据insertData(offset, arg): 在指定位置插入数据deleteData(offset, count): 删除指定位置得数据replaceData(offset, count, arg): 替换指定位置的数据substringData(offset, count): 截取指定位置的数据 Text Text节点本身有一个wholeText属性和三个方法属性: wholeText: 表示于Text节点相邻的所有Text节点组成的文本replaceWholeText: // 不被支持isElementContentWitespace// 不被支持splitText用于在指定位置将Text节点分为两个Text节点参数为分割位置 Comment Comment节点表示注释类型的节点继承CharacterData没有自己的属性 Document Document节点并不是直接在Html文件中存在的节点它代表整个文档所有其他节点都在它之下它包含的属性 adoptNode(source): 将另外一个文档中的节点添加到当前文档importNode(importedNode, deep): 引入节点createAttribute(name): 创建属性节点createComent(data): 创建注释节点createDocumentFragment(): 创建DocumentFragment节点createElement(tagName): 创建Element节点createTextNode(data): 创建Text节点renameNode(node, namespanceURI, newName): 修改节点名称getElementById(id): 使用Id获取Element节点getElementByTagName(TagName)按照标签名获取所有节点doctype文档类型DocumentTypedocumentElement: 获取Element根节点例如htmlinputEncoding: 编码方式implementation: 获取DOMImplementationstrictErroChecking: 是否强强制进行错误检查可读写 DocumentFragment DocumentFragment节点表示Document片段节点它是轻量级的Document继承自Node没有自己的属性。它的作用就是一个容器当选哟插入多个节点时为了避免频繁的操作DOM可以先使用DocumentFragment之后再插入到DOM中。 异常对象 辅助对象 DOMImplementation独立于文档的接口检查是否支持指定版本的特性获取指定版本创建DocumentType创建Document。NamedNodeMap获取包含节点的数量按名称获取指定节点将指定节点添加到Map中删除指定名称的节点按序号获取节点。NodeList与NamedNodeMap类似不同之处在于NodeList包含的节点是有顺序的。 如果觉得文章写得还行请点个赞。如果想与我进一步交流可以关注我的公众号或者加我的微信。
