dom操作节点之常用方法
DOM:
获取节点:{
1、 document.getElementById (元素id):通过元素id找到节点
2、 document.getElementsByClassName (元素类名className): 通过class类名找到节点,返回的是一个集合
3、 document.getElementsByTagName (标签名):通过标签名找到节点,返回一个集合 标签名:如<a>\ <p>\ <div> ....
4、 document.getElementsByName (name名): 通过带有name属性的标签元素找到节点返回一个集合,
5、 document.querySelector(): 通过css选择器进行查找,id class 标签名,如果查找是多个,返回第一个标签元素
6、 document.querySelectorAll(): 通过css选择器进行查找,id class 标签名;返回的是一个集合
}
通过节点属性获取节点:{
1、 firstChild; 父元素.firstChild 获取父元素首个子节点 (包含文本节点 #test)
2、 lastChild: 父元素.lastChild 获取父元素最后一个子节点 (包含文本节点 #test)
3、 childNodes: 父元素.childNodes 获取父元素所有的子节点 (包含文本节点 #test)
4、 parentNode\parentElement: 子节点.parentNode 通过子节点找到父元素
5、 previousSibling: 兄弟节点.previousSibling 获取已知节点的前一个节点
6、 nextSibling: 兄弟节点.nextSibling 获取已知节点的后一个节点
7、 ownerDocument: 属性返回当前节点所在的顶层文档对象(document)
8、 textContent: 属性返回当前节点和它的所有后代节点的文本内容 -- - - - 忽略当前节点内部的HTML标签
9、 nodeValue 属性返回或设置当前节点的值,格式为字符串;一般只用于Text节点
10、 firstElementChild: 返回第一个元素节点
11、 lastElementChild: 返回最后一个元素节点
12、 children: 返回所有子元素节点(集合)
}
创建元素节点:{
1、createElement(): document.createElement(元素标签) 创建元素节点
2、createAttribute():document.createAttribute(元素属性) 创建属性节点 <div class="hehehe"></div>
setAttributeNode():添加一个属性节点
3、createTextNode():document.createTextNode(文本内容) 创建文本节点
}
判断节点子节点:hasChildNodes():表示当前节点是否有子节点
插入节点:{
1、appendChild(): 父元素.appendChild(所添加新节点) 向父元素末尾添加新元素
2、insertBefore():父元素.insertBefore(所要添加的新节点,将被插入的节点位置) 如果第二个参数为null,所添加的
元素插入在末尾
}
替换节点:replaceChild(要插入的新节点,将被替换的旧节点)
复制节点:cloneNode(): {
要被复制的节点.cloneNode(true):复制当前节点及所有子节点
要被复制的节点.cloneNode(false):仅复制当前节点
}
删除节点:removeChild(要删除的节点):删除指定节点
contains(): 返回boolean值 表示参数节点是否为当前节点的后代节点 document.body.contains(node);
isEqualNode():返回boolean值 检查两个节点是否相等
满足条件:{
1、类型相同
2、属性相同
3、子节点相同
}
属性操作:{
获取属性:getAttribute():
元素节点.getAttribute(元素属性名)
设置属性:setAttribute()
元素节点.setAttribute(元素属性名,元素属性值)
删除属性:removeAttribute()
元素节点.removeAttribute(元素属性名);
检查是否存在的属性名称:hasAttribute()
元素节点.hasAttribute(元素属性名);
}
style属性{ // background-color ---> backgroundColor
getPropertyValue(属性名):
setProperty(属性名,属性值)
removeProperty(属性名)
cssText('style') 设置或删除样式
}
{ //
textContent():获取元素的文本内容
innerText():获取元素的文本内容
innerHTML():获取元素内容(包含文本、标签元素)
}
作者: 恋雨情怀
链接:https://www.imooc.com/article/11809
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作
dom操作节点之常用方法的更多相关文章
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JavaScript的DOM操作(节点操作)
创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...
- DOM操作节点对象集合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- javascript DOM操作 节点的遍历
通过javascript的遍历可以由一个节点来查找它的子节点(childNodes).兄弟节点(nextSibling/previousSibling)和父节点(parentNode). 代码说明: ...
- js下 Day03、DOM操作--节点方法
语法:parentNode.appendChild(child) 功能:向父节点的子节点列表的末尾添加新的子节点 语法:parentNode.removeChild(child) 功能:从子节点列表中 ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
随机推荐
- k64 datasheet学习笔记3---Chip Configuration之Analog
1.前言 本文主要讲述K64芯片配置,关于模拟部分的内容,主要包括:ADC, CMP, DAC, VREF 2.16bit SAR ADC 从上图可以看出ADC主要挂在外设总线0上,由于ADC的输入引 ...
- 题解-UOJ284 快乐游戏鸡
Problem uoj 题意大意: 一棵树,点权\(w_i\),每次玩家可以在树上行走,一条边需要\(1\)的时间,只能往儿子走.每次游戏需要从\(s\)到\(t\). 玩家有一个总死亡次数,初始为\ ...
- Light OJ 1011
题意: (好难看) 给你 N 个 男的, 女的, 男的选女票, 题目给出矩阵, Mp[i][j] 表示 第 i 个男的选 第 J 个女的优先值 选了 J 之后的就不能选 J 了: 求所有狗男女的最大优 ...
- python 基础 Two day
1.格式化输出 %s 字符串 %d 数字 %% 转义 % %f 小数 现在有以下需求,让用户输入name, age, job,hobby 然后输出如下所示: ------------ i ...
- Spring通过SchedulerFactoryBean实现调度任务的配置(定时器)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 15)django-ORM(多对多关系)
django ORM多对多关系使用 一:多对多关系创建 多对多关系创建:分为两种情况,手动创建和django自动创建 1)手动创建:自定义关系表 通过自定义表,通过models.ForeignKey创 ...
- 给Linux增加swap内存
有时内存不足时, 编译xxx报错cc: 编译器内部错误:已杀死(程序 cc1) Please submit a full bug report, with preprocessed source if ...
- liunx 安装redis 4.0
liunx 上安装redis 4.0.1 第一步:将 redis-4.0.1.tar.gz 压缩问上传至/home目录下 第二步: 解压文件 tar -zxvf redis-4.0.1.tar.g ...
- 通过cmd 使用 InstallUtil.exe 命令 操作 windows服务 Windows Service
要安装windows service 首先要找到 InstallUtil.exe,InstallUtil.exe位置在 C:\Windows\Microsoft.NET\Framework\v4.0. ...
- Confluence 6 代理和 HTTPS 详细配置指南链接
详细配置指南 更多有关连接器示例,我们提供了一些按步骤配置的指南来帮助你启用 HTTPS 并正确配置你的代理. HTTPS: Running Confluence Over SSL or HTTPS ...