<!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命令用于启动.停止.重 ...