<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style>

		div{padding:20px;}

		@-webkit-keyframes start1 {

			0%,30% {opacity: 0;-webkit-transform: translate(0,8px);}

			60% {opacity: 1;-webkit-transform: translate(0,0);}

			100% {opacity: 0;-webkit-transform: translate(0,-10px);}

		}

	</style>

</head>

<body style="overflow:hidden;">

	<div>

		<p>11111</p>

		<p id='n'>2222222</p>

		<p>3333333</p>

	</div>

	<form id="f">

		<input name="aaa" type="radio" value="111">111

		<input name="aaa" type="radio" value="222">222

		<input name="aaa" type="radio" value="333">333

		<div>

			不是直接子元素

			<p>不是直接子元素</p>

		</div>

	</form>

	<div id="father">

		<p>第一个元素是我吗？？？</p>

		<p>第一个元素是我吗？？？</p>

		<p>最后一个元素是我吗？？？</p>

	</div>

	<script>

		/* 值得注意的是nodelist并不是一个真正意义上的数组，他是一个类数组对象

		 类数组对象和数组类似，但实际上他依然是一个对象，可以通过(typeof nodelist !="object" && nodelist.constructor == Array)来判断。

		 只是把平时我们习惯用的键改成数组命名，并添加一个length属性，如下所示：

		 {

			"1":123,

			"2":234,

			length:2

		 }

		 */

		// 根据id获取node，这个在ie7下会获取到name等于n的元素可以通过getAttributeNode('id').value进行判断

		var oid = document.getElementById('n');

		console.log("id获取",oid)

		// 根据tagname获取nodes得到的是一个nodelist

		var nodes = document.getElementsByTagName('p');

		console.log("根据tagname获取",nodes)

		// getElementByName 根据name属性选择，返回nodelist

		var nodes1 = document.getElementsByName('aaa');

		console.log("根据name属性选择，返回nodelist:",nodes1);

		// 根据css选择器获取nodes得到的是一个node   ie8+

		var dom = document.querySelector("body [name='aaa']");

		console.log("querySelector选择：",dom)

		// 根据css选择器获取nodes得到的是一个nodelist ie8+

        var doms = document.querySelectorAll("input");

        console.log("querySelectorAll选择：",doms) 

        // 获取子节点得到的子节点包含空文本节点，需要通过判断nodeType进行过滤 或者用elements

        var childNodes = document.getElementsByTagName('body')[0].childNodes;

        console.log("获取的子节点：",childNodes);

        // 获取所有子元素 不包含文本节点

		var childNodes2 = document.getElementById("f").elements;

		console.log("elements获取的子节点：",childNodes2);

        // 返回首个非文本节点子节点（注意换行回作为一个空白textNode）

        function getFirstChild(node){

        	var first = node.firstChild;

        	console.log(first)

        	while(first.nodeType!=1){

        		first = first.nextSibling;

        	}

        	return first;

        }

        var ofirst = getFirstChild(document.getElementById('father'));

        console.log("获取第一个子元素：",ofirst); 

        // 返回末尾非文本节点子节点（注意换行回作为一个空白textNode）

        function getLastChild(node){

        	var last = node.lastChild;

        	console.log(last)

        	while(last.nodeType!=1){

        		last = last.previousSibling;

        	}

        	return last;

        }

        var olast = getLastChild(document.getElementById('father'));

        console.log("获取最后一个子元素：",olast); 

		// 获取前一个元素

		function getPreviousNode(node){

			while(node.previousSibling.nodeType != 1){

				node = node.previousSibling;

			}

			return node.previousSibling;

		}

		var oN = document.getElementById('n');

		console.log(getPreviousNode(oN))

		console.log(document.getElementById("f").elements[0].value)

		console.log(document.getElementById("f").elements[2].value)

		// 获取后一个元素

		function getNextNode(node){

			while(node.nextSibling.nodeType != 1){

				node = node.nextSibling;

			}

			return node.nextSibling;

		}

		// 创建元素追加到父元素里

		var newList = document.createElement('ul');

			for(var i=0;i<5;i++){

				var txt = document.createTextNode(i+'创建元素追加到父元素里');

				var list = document.createElement('li');

				list.appendChild(txt);

				newList.appendChild(list);

			}

		document.getElementById("father").appendChild(newList);

	</script>

</body>

</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. if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary

    if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary

  2. Stolz–Cesàro theorem

    w http://planetmath.org/sites/default/files/texpdf/33795.pdf Stolz–Cesàro theorem - Wikipedia  https ...

  3. Delphi里的Windows消息（可查MSDN指定位置）

    各种控件的通知消码和控制消息可由MSDN-> Platform SDK-> User Interface Services->Windows User Interface->C ...

  4. Win7环境下Apache+mod_wsgi本地部署Django

    django基础已经掌握的同学可以尝试将项目发布已寻找些许成就感,以鼓励自己接下来进行django的进阶学习 以前你总是使用python manage.py runserver进行服务启动,但是却不知 ...

  5. java 对象与二进制互转

    来自 : http://blog.csdn.net/luckyzhoustar/article/details/50402427 /** * @FileName: ByteToObject.java ...

  6. 印象笔记ipad端快捷键

  7. springboot 2.0 配置 logback

    springboot2.0默认已经引入日志jar依赖,所以直接配置日志信息就可以了. 在application.properties中加入: logging.config=classpath:logb ...

  8. 剑指offer 面试27题

    面试27题: 题目:二叉树的镜像 题:操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / ...

  9. CSS 中z-index全解析（摘自阿里西西）

    z-index全解析 Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶 ...

  10. tar软件安装

    安装tar   ./configure   make   sudo make install