详谈DOM简介及节点、属性、查找节点的方法

DOM(Document Object Modle) 操作文档的编程接口

DOM定义了表示和修改文档的方法，不能修改css样式表，在js中使用DOM方法改变元素的css样式，实质上是在元素上添加行间样式。

DOM对象就是宿主对象，用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0——>html5

HTML和xml的区别：除了xml可以自定义标签外基本上没区别，xml被json替代了。

document，单独写的时候，它代表整个文档，隐式的写在html标签的上一层，html只是文档中的根标签。

注意点：BOM、DOM成组的东西都是类数组，而不是数组。

获取元素的方法：

getElementById();

在IE8以下的浏览器不区分id值得大小写，并且匹配元素的name的属性值。由于后台会修改id值，所以尽量不用或少用id。

getElementsByTagName();标签名，所有浏览器都支持

getElementsByClassName(); IE8及其以下得浏览器不支持

getElementsByName(); 在旧版本中，只有能提交请求的标签的name才生效(form、表单元素、img、iframe)

document.querySelector(); css选择器，IE7及以下不兼容，并且不具有实时性。

document.querySelectAll();

节点类型：

元素节点 1

属性节点 2

文本(text)节点 3 // 文本、空格、回车等都是文本节点

注释(comment)节点 8

document节点 9

documentfragment 11

遍历节点数：

parentNode 子节点的父节点，最终的parentNode节点是document节点。

childNodes 父节点的所有子节点，元素节点、注释节点、文本节点

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 前一个兄弟节点

遍历元素节点数：（除了children节点，其他的都是IE9及以下不兼容）

parentElement 元素的父元素节点，最终的父元素节点是html元素，document是自成节点。

children 父元素下的元素子节点。

node.childElementCount === node.children.length 当前子节点的元素子节点个数。用children.length。

firstElementChild 第一个元素子节点

lastElementChild 最后一个元素子节点

nextElementSibling、previousElemnetSibling

节点的四个属性：

nodeName 除了元素节点，返回的结果前面都有一个‘#'，而元素节点返回大写形式的标签名，类型都为只读。

nodeValue 只用于文本节点和注释节点,可读写。

nodeType 返回数字，该数字代表对应的节点类型。只读

attributes 元素节点的属性集合。

node.hasChildNodes()方法，判断父节点里面是否有子节点，返回结果为布尔值。

以上这篇详谈DOM简介及节点、属性、查找节点的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问我们</p> <ul c

  • DOM下的节点属性和操作小结

    属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. 2 .nodeType 值:1,元素节点:2,属性节点:3,文本节点.nodeType是只读的. 3 .nodeValue 返回一个字符串,指示这个节点的值.元素节点返回null,属性节点返回属性值,文本节点返回文本.nodeValue可读可写,这是对元素节点不能写.一般只用于设置文本节点的值. 4 .childNodes 返回子节点数组.文本和属性节点的ch

  • jQuery查找节点并获取节点属性的方法

    jQuery查找节点并获取节点属性的方法

    本文实例讲述了jQuery查找节点并获取节点属性的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jqu

  • JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问

  • jacascript DOM节点——元素节点、属性节点、文本节点

    元素节点 元素节点就是HTML标签元素,元素节点主要提供了对元素标签名.子节点及属性的访问: 元素节点的三个node属性:nodeType:1.nodeName/TagName:元素的标签名大写.nodeValue:null: 其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document: 元素的 childNodes 属性中包含了它的所有子节点,这些子节点可能是元素.文本.注释.处理指令节点: childNodes 结合 NodeType 可以检查

  • 详谈DOM简介及节点、属性、查找节点的方法

    DOM(Document Object Modle) 操作文档的编程接口 DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式. DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合. xml-->xhtml-->html4.0-->html5 HTML和xml的区别:除了xml可以自定义标签外基本上没区别,xml被json替代了. document,单独写的时候,它代表整个文档,隐式的写在html标签

  • Javascript入门学习第八篇 js dom节点属性说明第1/2页

    今天我们讲DOM属性. 前面其实我们已经碰过DOM属性了. 比如: nodeName,nodeType-..今天我们详细的讲解下. 1,nodeName属性  : 节点的名字. 如果节点是元素节点,那么返回这个元素的名字.此时,相当于tagName属性. 比如: <p>aaaa</p>  : 则返回 p ; 如果是属性节点,nodeName将返回这个属性的名字. 如果是文本节点,nodeName将返回一个#text的字符串. 另外我要说的是: nodeName属性是一个只读属性,不

  • jQuery查找节点方法完整实例

    jQuery查找节点方法完整实例

    本文实例讲述了jQuery查找节点方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.10

  • JQuery中DOM节点的操作与访问方法实例分析

    本文实例讲述了JQuery中DOM节点的操作与访问方法.分享给大家供大家参考,具体如下: Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend()/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在对象前面/后面添加新的元素,可用逗号分割添加多个元素 要添加的元素.insertBefore(已有元素)/insertAfter() .empty

  • js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码

    复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite

  • JavaScript之DOM插入更新删除_动力节点Java学院整理

    JavaScript之DOM插入更新删除,供大家参考,具体内容如下 更新 拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.

  • js查找节点的方法小结

    本文实例总结了js查找节点的方法.分享给大家供大家参考.具体分析如下: 这里介绍查找节点的三种方法: 1. 根据id查找,返回值为对象: 复制代码 代码如下: document.getElementById(); 2. 根据div/p/....等html标签查找,返回数组(实际也是对象) 复制代码 代码如下: document.getElementsByTagName(); 3. 在表单中使用,根据表单name来查找 复制代码 代码如下: document.getElementsByName()

随机推荐