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元素节点/ ...
随机推荐
- EXCEL跨工作薄查找。提取信息
=IF(ISERROR(INDEX(zdy!$B:$B,MATCH(B15,zdy!$B:$B,0))),"不存在",INDEX(zdy!$C:$C,MATCH(B15,zdy!$ ...
- AIDL简单使用
1.AIDL定义 AIDL是android interface definition language的缩写,它对android IPC组件Binder进行了封装.使用它不需理会底层IPC的实现,只需 ...
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- Learn Python The Hard Way学习笔记001
今天搜索了一下raw_input() 和 input()的区别,引用下原文部分内容 两个函数均能接收 字符串 ,但 raw_input() 直接读取控制台的输入(任何类型的输入它都可以接收).而对于 ...
- Centos6.5 64linux系统基础优化(一)
1 SecureCRT配色方案 http://blog.csdn.net/zklth/article/details/8937905 2 32位和64位Centos linux系统的区别及实际查看 ...
- Cocos2d-x加速度计实例:运动的小球
下面我们通过一个实例介绍一下如果通过层加速度计事件实现访问加速度计.该实例场景如下图所示,场景中有一个小球,当我们把移动设备水平放置,屏幕向上,然后左右晃动移动设备来改变小球的位置. 下面我们再看看具 ...
- browserify.js 的模块加载
browserify的模块加载基本上和nodejs的类似: nodejs 的模块加载是依次去读取文件然后用一个类eval() 函数执行并返回module.exports的结果.为了避免循环加载,在加载 ...
- 选择问题(选出第i个最小元素)
通过分治法解决的分析(还有其他方法解决选择问题如使用 堆) 1 同快速排序一样,对输入的数组进行递归分解 不同的是:快速排序会递归处理分解的两边,而选择问题只处理需要的一边 2 选择问题的期望时间代价 ...
- 线程模式HS/HA和L/F的区别, HS/HA的实现原理图
线程池模式一般分为两种:L/F领导者与跟随者模式.HS/HA半同步/半异步模式. HS/HA 半同步/ 半异步模式 :分为三层,同步层.队列层.异步层,又称为生产者消费者模式,主线程处理I/O事件并解 ...
- OpenCV3添加滑动条和鼠标事件到图形界面
鼠标事件和滑动条控制在计算机视觉和OpenCV中非常有用,使用这些控件,用户可以直接与图形界面交互,改变输入图像或者变量的属性值. /* In this section, we are going t ...