<!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. python问号堂--第二篇

    1.分别书写数字5,10,32,7的二进制表示? 5---0b101      10---0b1010     32---0b100000    7---0b111 以上结果可以bin()来检测 2. ...

  2. Python利用subprocess起进程

    from multiprocessing import Process, Pool import time import subprocess def task(msg): print 'hello, ...

  3. Selenium获取input输入框中值的几种方法

    1.selenium 自带的方法 get_attribute('value') driver.find_element_by_name("f[url]").get_attribut ...

  4. （4.8）SQL Server DAC——专用管理员连接

    SQL Server DAC——专用管理员连接 默认情况下,只有本地可以使用DAC连接,但也可以开启远程DAC sp_configure ; go reconfigure with override; ...

  5. （4.7）怎么捕获和记录SQL Server中发生的死锁?

    转自:https://blog.csdn.net/c_enhui/article/details/19498327 怎么捕获和记录SQL Server中发生的死锁? 关键词:死锁记录,死锁捕获 sql ...

  6. 字符串之strchr

    功能:查找字符在字符串中第一次出现的位置. #include <iostream> #include <assert.h> using namespace std; char ...

  7. gearman mysql持久化

    gearman 创建Mysql持久化队列的方式如下: 启动gearman,命令如下: gearmand命令: -b, –backlog=BACKLOG 连接请求队列的最大值 -d, –daemon D ...

  8. 20160422 --Switch…case 总结； 递归算法

    13 2016-04-22  11:01:00 Switch…case 总结(网摘) 例题: Console.WriteLine("1.汉堡包"); Console.WriteLi ...

  9. pyhton3 time模块

    来自:菜鸟教程 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为 ...

  10. asp.net,缓存Cache

    缓存Cache: >直接使用Cache["content"],缓存与Session不同,所有用户都可以共享.永不过期,由服务器自己维护,当内存不够时,会将老的缓存释放掉. & ...