1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style>
  7. 		div{padding:20px;}
  8. 		@-webkit-keyframes start1 {
  9. 			0%,30% {opacity: 0;-webkit-transform: translate(0,8px);}
  10. 			60% {opacity: 1;-webkit-transform: translate(0,0);}
  11. 			100% {opacity: 0;-webkit-transform: translate(0,-10px);}
  12. 		}
  13. 	</style>
  14. </head>
  15. <body style="overflow:hidden;">
  16. 	<div>
  17. 		<p>11111</p>
  18. 		<p id='n'>2222222</p>
  19. 		<p>3333333</p>
  20. 	</div>
  21. 	<form id="f">
  22. 		<input name="aaa" type="radio" value="111">111
  23. 		<input name="aaa" type="radio" value="222">222
  24. 		<input name="aaa" type="radio" value="333">333
  25. 		<div>
  26. 			不是直接子元素
  27. 			<p>不是直接子元素</p>
  28. 		</div>
  29. 	</form>
  30. 	<div id="father">
  31. 		<p>第一个元素是我吗？？？</p>
  32. 		<p>第一个元素是我吗？？？</p>
  33. 		<p>最后一个元素是我吗？？？</p>
  34. 	</div>
  35. 	<script>
  36.  
  37. 		/* 值得注意的是nodelist并不是一个真正意义上的数组，他是一个类数组对象
  38. 		 类数组对象和数组类似，但实际上他依然是一个对象，可以通过(typeof nodelist !="object" && nodelist.constructor == Array)来判断。
  39. 		 只是把平时我们习惯用的键改成数组命名，并添加一个length属性，如下所示：
  40. 		 {
  41. 			"1":123,
  42. 			"2":234,
  43. 			length:2
  44. 		 }
  45. 		 */
  46.  
  47. 		// 根据id获取node，这个在ie7下会获取到name等于n的元素可以通过getAttributeNode('id').value进行判断
  48. 		var oid = document.getElementById('n');
  49. 		console.log("id获取",oid)
  50.  
  51. 		// 根据tagname获取nodes得到的是一个nodelist
  52. 		var nodes = document.getElementsByTagName('p');
  53. 		console.log("根据tagname获取",nodes)
  54.  
  55. 		// getElementByName 根据name属性选择，返回nodelist
  56. 		var nodes1 = document.getElementsByName('aaa');
  57. 		console.log("根据name属性选择，返回nodelist:",nodes1);
  58.  
  59. 		// 根据css选择器获取nodes得到的是一个node   ie8+
  60. 		var dom = document.querySelector("body [name='aaa']");
  61. 		console.log("querySelector选择：",dom)
  62.  
  63. 		// 根据css选择器获取nodes得到的是一个nodelist ie8+
  64.         var doms = document.querySelectorAll("input");
  65.         console.log("querySelectorAll选择：",doms) 
  66.  
  67.         // 获取子节点得到的子节点包含空文本节点，需要通过判断nodeType进行过滤 或者用elements
  68.         var childNodes = document.getElementsByTagName('body')[0].childNodes;
  69.         console.log("获取的子节点：",childNodes);
  70.  
  71.         // 获取所有子元素 不包含文本节点
  72. 		var childNodes2 = document.getElementById("f").elements;
  73. 		console.log("elements获取的子节点：",childNodes2);
  74.  
  75.         // 返回首个非文本节点子节点（注意换行回作为一个空白textNode）
  76.         function getFirstChild(node){
  77.         	var first = node.firstChild;
  78.         	console.log(first)
  79.         	while(first.nodeType!=1){
  80.         		first = first.nextSibling;
  81.         	}
  82.         	return first;
  83.         }
  84.         var ofirst = getFirstChild(document.getElementById('father'));
  85.         console.log("获取第一个子元素：",ofirst); 
  86.  
  87.         // 返回末尾非文本节点子节点（注意换行回作为一个空白textNode）
  88.         function getLastChild(node){
  89.         	var last = node.lastChild;
  90.         	console.log(last)
  91.         	while(last.nodeType!=1){
  92.         		last = last.previousSibling;
  93.         	}
  94.         	return last;
  95.         }
  96.         var olast = getLastChild(document.getElementById('father'));
  97.         console.log("获取最后一个子元素：",olast); 
  98.  
  99. 		// 获取前一个元素
  100. 		function getPreviousNode(node){
  101. 			while(node.previousSibling.nodeType != 1){
  102. 				node = node.previousSibling;
  103. 			}
  104. 			return node.previousSibling;
  105. 		}
  106. 		var oN = document.getElementById('n');
  107. 		console.log(getPreviousNode(oN))
  108. 		console.log(document.getElementById("f").elements[0].value)
  109. 		console.log(document.getElementById("f").elements[2].value)
  110.  
  111. 		// 获取后一个元素
  112. 		function getNextNode(node){
  113. 			while(node.nextSibling.nodeType != 1){
  114. 				node = node.nextSibling;
  115. 			}
  116. 			return node.nextSibling;
  117. 		}
  118.  
  119. 		// 创建元素追加到父元素里
  120. 		var newList = document.createElement('ul');
  121. 			for(var i=0;i<5;i++){
  122. 				var txt = document.createTextNode(i+'创建元素追加到父元素里');
  123. 				var list = document.createElement('li');
  124. 				list.appendChild(txt);
  125. 				newList.appendChild(list);
  126. 			}
  127.  
  128. 		document.getElementById("father").appendChild(newList);
  129.  
  130. 	</script>
  131. </body>
  132. </html>

　　

未完待续。。。

js dom操作选择器，dom操作复习的更多相关文章

  1. day45:JS中的json&JS的BOM操作和DOM操作

    目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...

  2. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  3. js 操作html dom

    author:冯永贤(Tony Feng,鸡鸣星),文章整合:internet <HTML DOM> 一:js能够改变HTML DOM 里面的什么内容 JavaScript 能够改变页面中 ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  6. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  7. Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）

    前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...

  8. js学习总结：DOM节点一（选择器，节点类型）

    DOM:document object model 文档对象模型 DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图: 一.查看元素节点 1.document.getElem ...

  9. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  10. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

随机推荐

  1. Solr 查询时候关键期 编码问题

    背景架构: 中间是dubbo 调用, 其实还是编码问题!没啥大问题!记录下

  2. 编译java-cef

    javacef即java Chromium Embedded Framework,其功能是通过在java应用中嵌入谷歌浏览器内核Chromium. 编译java-cef的过程可参考以下文档及视频: h ...

  3. Asp.Net MVC anti-forgery token的问题：nameidentifier not present

    前一篇关于anti-forgery token问题的博文提到我们可以通过修改AntiForgeryConfig.UniqueClaimTypeIdentifier属性来避免AntiForgeryTok ...

  4. Java基础—多态

    1.什么是多态 多态是同一个行为具有多个不同表现形式或形态的能力. 多态性是对象多种表现形式的体现. 现实中,比如我们按下 F1 键这个动作: 如果当前在 Flash 界面下弹出的就是 AS 3 的帮 ...

  5. C#加快Bitmap的访问速度

    在对Bitmap图片操作的时候,有时需要用到获取或设置像素颜色方法:GetPixel 和 SetPixel, 如果直接对这两个方法进行操作的话速度很慢,这里我们可以通过把数据提取出来操作,然后操作完在 ...

  6. 【转】Python爬虫(4)_selenium模块

    一 介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...

  7. HackerRank - maximum-perimeter-triangle 【水】

    题意 给出一系列数字,判断其中哪三个数字可以构成一个三角形,如果有多个,输出周长最大的那个,如果没有输出 - 1 思路 数据较小,所有情况FOR一遍 判断一下 AC代码 #include <cs ...

  8. Loadrunder脚本篇——Run-time Settings之Browser Enmulation

    浏览器模拟 所有Internet Vuser Header包含一个标识将被模拟的浏览器类型(或无线工具包)的User Agent header.例如User-Agent: Mozilla/3.01Go ...

  9. iOS 当公司有人向你提问，你该如何应对？

    今天 因为iOS 开发的内部版本号耿耿于怀好久,释然后让我有了一个新想法:从前,能让我兴奋的点是解决一个有一个拗脑筋的问题,见大部分博客便知,都是技术方面的积累. 那么从今天起我决定让自己有个新起点, ...

  10. mongodb简介和特性

    1.mongodb是基于文档的(BSON,类似json的键值对来存储),不是基于表格,易于水平扩展,将内部相关的数据放在一起能提高数据库的操作性能.如果你想新建一个新的文档类型,不用事先告诉数据库关于 ...