<!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. 使用QFuture类监控异步计算的结果

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Amnes1a/article/details/65630701在Qt中,为我们提供了好几种使用线程的 ...

  2. js验证表单大全1

    附加:js验证radio是否选择 <script language="javascript"> function checkform(obj) { for(i=0;i& ...

  3. python多进程编程(一)

    multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.Pyt ...

  4. app是什么意思?智能手机的第三方应用程序

    APP,在手机中的意思就是application的简称,也就是应用程序的意思,一般指手机软件,是安装在手机上的软件,完善原始系统的不足与个性化.APP是智能手机的第三方应用程序,app通常分为个人用户 ...

  5. iOS Application Project与OS X Application Project对于plist使用的区别

    前几天因为在开源中国看到一个求源代码的问题: 模拟一个动物园系统MyZoo 1.动物园里面有三种动物:Panda,Elephant,Kangaroo 2.三种动物都有一定的数量(不止一只) 3.动物有 ...

  6. Python之面向对象进阶------反射（Day26）

    一 classmethod class Classmethod_Demo(): role = 'dog' @classmethod def func(cls): print(cls.role) Cla ...

  7. LeetCode：旋转图像【48】

    LeetCode:旋转图像[48] 题目描述 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使 ...

  8. Hibernate学习---关联关系映射

    关联关系是用到的最多的一种关系,非常重要,在内存中反映为实体关系,映射到DB中主键外键关系,实体间的关联,即对外键的维护,关联关系的发生,即对外键数据的改变. 在这里就不赘述什么是外键什么是主键了. ...

  9. range精讲

    var ec = range.endContainer endContainer不是一个引用类型 range是引用类型 range经过改变范围之后 var ec2 =range.endContaine ...

  10. 每天一个Linux命令（53）service命令

        service命令用于对系统服务进行管理.   (1)用法:     用法:  service  [服务]  [操作]   (2)功能:     功能:  service命令用于启动.停止.重 ...