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 ...
随机推荐
- Atitit Uncaught (in promise) SyntaxError Unexpected token < in JSON at position 0
Atitit Uncaught (in promise) SyntaxError Unexpected token < in JSON at position 0 Uncaught (in ...
- Eclipse和MyEclipse工程描述符.classpath和.project和.mymetadata详解(转)
转自:http://blog.csdn.net/zygsee/archive/2009/12/22/5046100.aspx 有时候在一个Java工程里我们需要加入第三方jar包,这时你加入的最好相对 ...
- UML类建模(强烈推荐-思路很清晰)
UML类建模(强烈推荐-思路很清晰) 2016年10月23日 15:17:47 mbshqqb 阅读数:2315 标签: uml面向对象设计模式 更多 个人分类: 面向对象程序设计 UML的构造快 ...
- 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)
最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入
- qualcomm wifi kernel beacon loss 日志记录
记录一下高通对于beacon loss的处理的日志.方便后面再来分析. 04:17:13.397139 [04:17:13.383909] [000000A81699E7EC] [VosMC] wla ...
- 记录一次在安装双系统的过程(先有debian, 后加windows 8.1)
突破的难题: 如何在一整个根目录的分区中切出来一半用于安装windows8.1呢? 当初安装debian系统时, 由于脑残,直接把整个500G的硬盘分给了根目录 / ,所以整个磁盘就TMD的一个主 ...
- Zookeeper系列二:分布式架构详解、分布式技术详解、分布式事务
一.分布式架构详解 1.分布式发展历程 1.1 单点集中式 特点:App.DB.FileServer都部署在一台机器上.并且访问请求量较少 1.2 应用服务和数据服务拆分 特点:App.DB.Fi ...
- centos7 防火墙
1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...
- PM2 指令简介
pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的,下面我们来看pm2常用的命令用法介绍吧 ...
- QT Graphics-View 3D编程例子- 3D Model Viewer
学习在Graphics-View框架中使用opengl进行3D编程,在网上找了一个不错的例子“3D Model Viewer”,很值得学习. 可以在http://www.oyonale.com/acc ...