js获取节点
demo1:
<!-- <div id="test" v="1">你好</div> -->
// console.log(test.nodeType,test.getAttribute("v"),test.nodeName,test.firstChild.nodeValue);
//firstChild.nodeValue是第一个节点的value的值

demo2:
<ul id="test2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
方法一 :for(var i = 0,len = test2.childNodes.length;i<len;i++){
console.log(test2.children[i].firstChild.nodeValue);//children[i]
}
方法而:for(var i = 0,len = test2.childNodes.length;i<len;i++){
if(test2.childNodes[i].nodeType == 1){ //test2.childNodes[i].nodeType == 1都是文本节点 不是回车节点
console.log(test2.childNodes[i].firstChild.nodeValue);
}
}
demo3:
var ele = document.createElement("li");//创建一个li
// test2.insertBefore(ele,test2.firstChild);//ele是创建的节点li,test2.firstChild是插入test2的第一个节点(把ele插入test2的第一个节点)
// test2.insertBefore(ele,test2.lastChild);//ele是创建的节点,test2.firstChild是插入test2的最后一个个节点
//
var test3 = test2.replaceChild(ele,test2.children[0]);//ele是创建的节点,test2.children[0]是替换test2的第一个节点
console.log(test3);//有返回值,返回值为被替换的值
ele.innerHTML = "<strong>00</strong>"//什么都不加就是空标签
ele.onclick = function(){
console.log(this.firstChild.firstChild.nodeValue);
}
console.log(test2.parentNode.nodeName)// 父节点的节点名称
childNodes和children的区别是 children属性做包含的文本节点,其它都差不多(ie9以上可用,ie8还包含注释节点)
js获取节点的更多相关文章
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
- JS获取节点的兄弟,父级,子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- JS获取节点方法
1. 通过顶层document节点获取:(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有 ...
- js获取节点和编辑的方法
创建新节点 1.创建一个DOM片段createDocumentFragment() 例如: var d=document.createDocumentFragment(); d.appendChild ...
- js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
- 原生态js获取节点的方法
<input value="我是用id来获取值的" type="button" onclick="GetById()"/> &l ...
- js 获取节点
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...
- js:获取节点相关的 nodeName,nodeType,nodeValue
getElementById() getElementsByName() getElementsByTagName() hasChildNodes() nodeName nodeType=1元素节点/ ...
随机推荐
- Ehcache(2.9.x) - API Developer Guide, Transaction Support
About Transaction Support Transactions are supported in versions of Ehcache 2.0 and higher. The 2.3. ...
- ContentProvider(一)
注册ContentProvider: <provider android:name=".provider.UserProvider" android:authorities= ...
- Excel Operation
在日常工作中, 常常需要收集统计一些数据, 然后整理到excel, 这种重复性的操作可以自己写个工具来实现. 采用HtmlUnitDriver 访问页面, 抓取数据, 再把数据列表通过调用POI放到e ...
- Swift闭包(Closure)
语法: { (parameters) ->return type in statements} 实例:采用函数实现: let names =["Chris", "A ...
- IOS 解析XML--使用NSXML
一.解析文档顺序触发的函数 1.parserDidStartDocument,在文档的时候触发. 2.parser:didStartElement:namespaceURI:qualifiedName ...
- 【转】C#实现二叉查找树
原文URL: http://www.cnblogs.com/CareySon/archive/2012/04/19/ImpleBinaryTreeWithCSharp.html 简介 树是一种非线 ...
- System.Windows.Forms.Timer
一.主要属性.方法和事件 Windows 窗体 Timer 是定期引发事件的组件.该组件是为 Windows 窗体环境设计的. 时间间隔的长度由 Interval 属性定义,其值以毫秒为单位.若启用了 ...
- Apache 编译安装
# wget http://www.apache.org/dist/httpd/httpd-2.2.9.tar.gz (此处我是直接用的下载好的包) # tar -zxvf httpd-2.2.9. ...
- Mongodb DB shell数据操作
shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用JavaScript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help(); db.yo ...
- 关于B/S系统中文件上传的大小限制怎么做
1.前端:采用flash控件或者Html5的特性(有浏览器版本要求)来判断文件大小.纯html或js是没法判断用户上传文件大小的. 2.nginx:服务器端的第一道防线,一般会有对上传文件做大小限制. ...