JavaScript之Dom节点类型、遍历节点数。
2018-02-20 23:35
411 查看
在Dom文档查的结构中,实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形,可以通过遍历节点树的形式进行标签的选取。
Dom文档中,遍历节点的节点有,文本节点,注释节点和标签节点。
parentElement-->返回当前元素节点的父元素节点(IE不兼容)
Dom文档中,遍历节点的节点有,文本节点,注释节点和标签节点。
遍历节点树
以下找孩子节点包括文本节点和注释节点 parentNode -->父节点(最顶端的parentNode是docuemnt)<!DOCTYPE html> <html> <head> <title>Dom</title> </head> <body> <div> <span> <strong></strong> </span> </div> </body> <script type="text/javascript"> var strong = document.getElementsByTagName('strong')[0]; console.log(strong.parentNode); </script> </html> //输出<span></span>childNodes -->找孩子节点,只包括直系孩子节点,
<!DOCTYPE html> <html> <head> <title>Dom</title> </head> <body> <div> <span> <strong></strong> </span> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.childNodes); </script> </html> //输出NodeList(3) [text, span, text]firstChild --->第一个孩子节点,lastChild --->最后一个孩子节点
<!DOCTYPE html> <html> <head> <title>Dom</title> </head> <body> <div> <span> <strong></strong> </span> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.firstChild); console.log(div.lastChild); </script> </html> //#text //#textnextSibling --->后一个兄弟节点,previousSibling --->前一个兄弟节点。
<!DOCTYPE html> <html> <head> <title>Dom</title> </head> <body> <div> <span></span> <strong></strong> </div> </body> <script type="text/javascript"> var span = document.getElementsByTagName('span')[0]; var strong = document.getElementsByTagName('strong')[0]; console.log(span.nextSibling); console.log(strong.previousSibling); </script> </html> //#text //#text
遍历元素节点数
上面所说的遍历节点树不仅有元素节点,而且还有文本节点和注释节点。下面所说的是遍历元素节点树。parentElement-->返回当前元素节点的父元素节点(IE不兼容)
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div">123 <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var strong = document.getElementsByTagName('strong')[0]; console.log(strong.parentElement); </script> </html> //<div></div>children --->返回当前元素子节点
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.children); </script> </html> //HTMLCollection(3) [strong, span, em]node.children.length === node.childElementCount 返回当前元素节点数。(IE不兼容)
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.children.length); </script> </html> //3firstElementChild--->返回第一个孩子节点。 lastElementChild--->返回最后一个孩子节点。(均IE不兼容)
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.firstElementChild); console.log(div.lastElementChild); </script> </html> //<strong></strong> //<em></em>nextElementSibling --->返回下一个兄弟元素节点。 previousElementSibling -->返回前一个兄弟元素节点。(IE均不兼容)
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var span = document.getElementsByTagName('span')[0]; console.log(span.nextElementSibling); console.log(span.previousElementSibling); </script> </html> //<em></em> //<strong></strong>
节点的四个属性
nodeName 返回字符串,只读,不能写。<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var span = document.getElementsByTagName('span')[0]; console.log(span.nodeName); </script> </html> //SPANnodeValue 可读可写,只有文本节点和注释节点才有 nodeType 返回该节点是什么类型。节点的类型及返回值:元素节点--1,属性节点--2,文本节点--3,注释节点--8,document--9,DocumentFragment--11,
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; var arr = div.childNodes; for(var prop in arr){ if(arr.hasOwnProperty(prop)){ console.log(arr[prop].nodeType); } } </script> </html> //3 1 3 1 3 1 3attribute ---->返回该节点属性的集合
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.attributes); </script> </html> //NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}hasChildNodes()方法 返回的是一个boolean值,表示该节点是否有子节点。当元素内没有任何东西的时候(包括空格和回车),返回false
<!DOCTYPE html> <html> <head> <title>Dom</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id = "demo" class ="Div"> <strong> </strong> <span></span> <em></em> </div> </body> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(div.hasChildNodes()); </script> </html> //trueJavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。--主页传送门--
相关文章推荐
- javascript 遍历dom 节点统计类型
- JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)
- JavaScript高级程序设计之DOM之节点层次之Text类型第10.1.4讲
- JavaScript高级程序设计之DOM之节点层次之DocumentFragment类型第10.1.8讲
- javascript之DOM(一节点类型Node)
- JavaScript高级程序设计之DOM之节点层次之Node类型第10.1.1讲
- JavaScript高级程序设计之DOM之节点层次之Document类型第10.1.2讲
- JavaScript高级程序设计之DOM之节点层次之Comment类型第10.1.5讲
- javascript遍历DOM节点方法详解
- JavaScript高级程序设计之DOM之节点层次之CDATASection类型第10.1.6讲
- JavaScript高级程序设计之DOM之节点层次之Attr类型第10.1.9讲
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- javascript中12种DOM节点类型概述
- JavaScript高级程序设计之DOM之节点层次之DocumentType类型第10.1.7讲
- JavaScript高级程序设计之DOM之节点层次之Element类型第10.1.3讲
- JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)
- javascript递归遍历所有DOM文档节点
- JavaScript DOM节点和文档类型
- JavaScript HTML DOM节点类型之Element类型(Element对象)
- javascript对dom节点拖拽的简单实现(drag特性)