DOM节点的基础操作
1.寻找节点
//寻找节点 id方法
document.getElementById(); //标准
//寻找节点层次方法
parentNode()、firstChild()和lastChild();
-查找兄弟一个节点
previousSibling
-查找后一个节点
nextSibling
//根据签名查找节点
document.getElementsByTagName();返回数组
//根据name查找节点
getElementsByName();
2.创建一个新节点
//elementName:要创建的元素标签名 在返回创建的节点
var li= document.createElement("li"); 这里创建了一个li节点
//设置节点信息
li.innerHTML="...";
//添加新的节点
-追加方式
var ul = document.getElementById("ul");
ul.appendChild(li) //像节点里面插入新创建的节点
ul.insertBefore(document.getElementById("li"),li) //插入其节点前面
3.删除节点
node.removeChild(child)
说明 child必须是node的子节点
DOM节点的基础操作的更多相关文章
- DOM节点(二):操作节点
appendChild() 用于向childNodes列表的末尾添加一个节点. var returnedNode = someNode.appendChild(newNode); 如果传入的节点已经是 ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 第6章 DOM节点操作
一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- dom节点的操作
dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法 $('#div1').ap ...
随机推荐
- MeasureSpec 的三中类型
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu ...
- linux下zip包处理
先来看例子: zip命令可以用来将文件压缩成为常用的zip格式.unzip命令则用来解压缩zip文件. 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip - ...
- 【Spark 深入学习 01】 Spark是什么鬼?
经过一段时间的学习和测试,是时候给spark的学习经历做一个总结了,对于spark的了解相对晚了写.春节期间(预计是无大事),本博准备推出20篇左右spark系列原创文章(先把牛吹出去再说) ,尽量将 ...
- javascript form提交 不执行onsubmit事件解决方案
转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...
- Hive数据倾斜解决办法总结
数据倾斜是进行大数据计算时最经常遇到的问题之一.当我们在执行HiveQL或者运行MapReduce作业时候,如果遇到一直卡在map100%,reduce99%一般就是遇到了数据倾斜的问题.数据倾斜其实 ...
- Paypal Rest Api自定义物流地址(跳过填写物流地址)
PayPal之前的Rest Api是不支持自定义物流地址的,最新升级版本的提供了这个服务(Payment Experience),大概步骤如下: 1.申请一个自定义的配置ID 自定义配置包括Logo, ...
- 为app录制展示gif
已同步更新至个人blog:http://dxjia.cn/2015/07/make-gif-for-app/ 在github上好多不错的开源项目展示demo的时候,都是采用了一个gif图片,很生动具体 ...
- [原]VS2012编译GLEW 1.11
1.到http://glew.sourceforge.net/下载源代码 2.使用vs2012打开build下vc6的glew.dsw ,自动生成2012工程(一路点确定)特别注意:不要使用build ...
- 如何使用点击事件弹出一个url的iframe选项卡
在一些前后端对接的接口中,前端需要根据后端返回进行跳转,但是有时候需要跳转的地址是不固定的,需要前端灵活的根据接口进行跳转,于是,url被放在接口中返回,而前端想打开一个新窗口的话就会比较麻烦,因为c ...
- JavaのEclipse安装Tomcat插件
由于我装的eclipse是SE版,所以没有Servlet项目,需要自己安装插件. 一:首先到Tomcat的官网下载对应Tomcat版本. http://tomcat.apache.org/ 现在tom ...