js dom操作选择器，dom操作复习
<!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操作复习的更多相关文章
- 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 ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- js 操作html dom
author:冯永贤(Tony Feng,鸡鸣星),文章整合:internet <HTML DOM> 一:js能够改变HTML DOM 里面的什么内容 JavaScript 能够改变页面中 ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
- 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- js学习总结：DOM节点一（选择器，节点类型）
DOM:document object model 文档对象模型 DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图: 一.查看元素节点 1.document.getElem ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- Dom的样式操作和属性操作
如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...
随机推荐
- 使用QFile进行文件操作（QFile可以使用FILE *指针，还必须指定AutoCloseHandle）
QFile类我我们提供了操作文件的常用功能.它是一种io设备,可以用来读写文本文件和二进制文件,也可以用来读写Qt的资源文件.QFile类可以单独使用,该类本身提供了read/write函数,但更方便 ...
- 解决john不能开多个进程的问题
在使用john进行shadow文件破解时,如果已经开了一个john的进程,这回提示以下错误: Crash recovery file is locked: /root/.john/john.rec ...
- 如何用Python输出一个斐波那契Fibonacci数列
a,b = 0, 1 while b<100: print (b), a, b = b, a+b
- return和yield的区别
# return 返回给调用者值,并结束此函数.#yiled 返回给调用者值,并将指针停留着当前位置.
- PAT 1068. 万绿丛中一点红(20)
对于计算机而言,颜色不过是像素点对应的一个24位的数值.现给定一幅分辨率为MxN的画,要求你找出万绿丛中的一点红,即有独一无二颜色的那个像素点,并且该点的颜色与其周围8个相邻像素的颜色差充分大. 输入 ...
- 一起talk C栗子吧（第七十八回：C语言实例--创建进程）
各位看官们,大家好.上一回中咱们说的是DIY ls命令续的样例.这一回咱们说的样例是:创建进程.闲话休提.言归正转. 让我们一起talk C栗子吧! 看官们.关于进程的概念,我们简单做个简单的介绍:进 ...
- 0107-将Monolith重构为微服务
重构到微服务的概述 将单一应用程序转换为微服务的过程是应用程序现代化的一种形式.这是开发人员几十年来一直在做的事情.因此,在将应用程序重构为微服务时,我们可以重用一些想法. 一个不使用的策略是重写“B ...
- Linux：Ubuntu下部署Web运行环境
Linux:Ubuntu下部署Web运行环境 本次博客将会从三部分内容详述Ubuntu系统下Web运行环境的配置: 依次是:FTP服务器的搭建.MYSQL数据库的搭建.JDK的安装等. 参考文章如下: ...
- Nginx常用命令（加入系统服务）
nginx 服务器重启命令,关闭 nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件 nginx -t -c /path/to/nginx.c ...
- GitHub命名规则
● Added ( 新加入的需求 ) ● Fixed ( 修复 bug ) ● Changed ( 完成的任务 ) ● Updated ( 完成的任务,或者由于第三方模块变化而做的变化 )