JavaScript中操作节点
1、获取节点
1.1、用 getElement 方法获取
获取元素节点时,必须等到DOM树加载完成后才能获取。两种处理方式:(1)将JS写在文档最后;(2)将代码写入window.onload函数中;
//通过ID来查看元素属性
var li = document.getElementById("first");
//通过类名来查看元素属性,返回元素数组
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性,返回数组
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性,返回数组
var lis3 = document.getElementsByTagName("li");
这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点的子节点里,选择需要的节点:
document.getElementById("div1").getElementsByTagName("li")[0];
1.2、用 querySelector 方法获取
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
var dq1 = document.querySelector("#id");
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。
var dqs1 = document.querySelectorAll("#div1 li");
2、查看设置属性(getAttribute、setAttribute)
attributes: 获取当前节点的所有属性节点。 返回数组格式。
document.getElementsByTagName("a")[0].getAttribute("target"); //element.setAttribute("属性名","属性值");
document.getElementsByTagName("INPUT")0].setAttribute("type","button");
3、设置样式
使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
使用 className设置元素类名
document.getElementById("first").className = "class1";
使用 style 样式 直接修改单个样式。注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";
使用 style 或 style.cssText 设置样式:
// IE不兼容
document.getElementById("first").style = "color:red;";
//cssText 属性用于设置或者返回元素声明的内联样式。
document.getElementById("first").style.cssText = "color:red;";
4、设置文本节点
innerHTML:取到或设置一个节点中的HTML代码。
innerText:取到或设置一个节点中的文本,会判断HTML标签样式,如果该标签隐藏,则该标签文本不会输出
<div class="container">
aaaa
<h1 class="h1 h2">container里的标题1</h1>
<h2 style="display: none">隐藏内容</h2>
bbbb
</div>
let cont = document.getElementsByClassName('container')[0];
console.log(cont.innerHTML);
//输出:
// aaaa
// <h1 class="h1 h2">container里的标题1</h1>
// <h2 style="display: none">隐藏内容</h2>
// bbbb console.log(cont.innerText);
//输出:
//aaaa
//container里的标题1
//bbbb console.log(cont.textContent);
//输出:
//aaaa
// container里的标题1
// 隐藏内容
// bbbb
5、父子同胞节点
5.1、关于子节点的操作
childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。
children: 获取当前节点的所有元素子节点(不包含文本节点)。
firstChild: 获取第一个子节点,包括回车等文本节点;
firstElementChild: 获取第一个元素节点。 不含文本节点;
lastChild: 获取最后一个子节点,包括回车等文本节点;
lastElementChild: 获取最后一个子节点,不含文本节点;
5.2、关于父节点的操作
parentNode: 获取当前节点的父节点。
5.3、关于同胞节点的操作
previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;
previousElementSibling: 获取当前节点的前一个元素兄弟节点;
nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;
nextElementSibling:获取当前节点的后一个元素兄弟节点;
6、创建新增、删除替换节点
6.1、创建元素节点
document.createElement("div"); //创建元素节点
6.2、创建文本节点
document.createTextNode(text)
var btn=document.createTextNode("Hello World");
6.3、添加节点
往父节点添加子节点
document.getElementById("myList").appendChild(newItem); //在父节点的末尾添加子节点
document.getElementById("myList").insertBefore(newItem,existingItem); //在父节点中的某一已存子节点前面添加节点 existingItem 是指父节点中已经存在的子节点,插入的新节点就插在这个子节点的位置
6.4、删除节点
父节点.removeChild(子节点): 从父节点中,删除指定子节点。
父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。
JavaScript中操作节点的更多相关文章
- JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
初学JavaScript时候,经常遇到需要操作的内容因为文本节点而使操作更麻烦或者不能达到效果. 例: <ul id="ull"> <li>111&l ...
- JavaScript中操作对象的属性
1.操作对象的属性 注意: 标签属性与DOM对象属性的相应关系: 绝大部分2者是同样的.如:imgobj.src属性相应<img src="" >中src属性,但也有例 ...
- JavaScript中操作数组的方法
JavaScript Array 对象 对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法. 总结 巧记 Push() 尾部添加 pop() 尾部删除 U ...
- javascript DOM操作 节点的遍历
通过javascript的遍历可以由一个节点来查找它的子节点(childNodes).兄弟节点(nextSibling/previousSibling)和父节点(parentNode). 代码说明: ...
- JavaScript中DOM节点层次Text类型
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
- javascript中操作元素属性
1. setAttribute():设置属性的值: getAttribute():得到属性的值: removeAttribute():移除属性: 2.offsetWidth:offsetWidth = ...
- JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- JavaScript动态操作style
1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...
随机推荐
- ctcss
CTCSS解码器基于非常窄的带通滤波器,其通过所需的CTCSS音调.滤波器的输出经过放大和整流,只要存在所需的音调,就会产生直流电压.直流电压用于打开,启用或取消静音接收器的扬声器音频级.当音调存在时 ...
- day31—CSS Reset 与页面居中布局
转行学开发,代码100天——2018-04-16 报名的网易前端开发课程今天正式开课了,这也是毕业后首次付费进行的正式培训课程学习.以此,记录每天学习内容. 今天学了两个方面的知识: 1. CSS ...
- CentOS7 - 安装 VirtualBox
参考资料 最新的可用安装包可以从这里下载 VirtualBox 是 x86 硬件虚拟化产品,功能上与 VMware Server.KVM.及 Xen 类似,但是 VirtualBox 不修改 Linu ...
- VulnStack靶场实战(未完成)
环境搭建 https://www.cnblogs.com/HKCZ/p/11760213.html 信息收集 目录爆破 这里发现有phpmyadmin目录,这里可以直接获取webshell 参照: h ...
- mysql时间增加一年
update siteserver_content_57 set AddDate=DATE_ADD(AddDate,INTERVAL 2 year),LastHitsDate=DATE_ADD(Las ...
- Neo4j elk Elasticsearch kibana kettle
图形数据库,用于查找犯罪或者啥的很好用:反欺诈 win安装neo4j使用查询https://www.cnblogs.com/rubinorth/p/5853204.html linux下安装neo4j ...
- #python# error:http.client.RemoteDisconnected: Remote end closed connection without response
添加headers user-agent 网络情况不好的状态下也能出现
- Codeforces - 1194C - From S To T - 子序列 - 排序
https://codeforces.com/contest/1194/problem/C 好像没什么好说的,要能构造s必须是t的子序列,并且相差的字符集合d是p的子集. 用双指针法求两遍子序列就可以 ...
- BZOJ 1040 [ZJOI2008]骑士 (基环树+树形DP)
<题目链接> 题目大意: Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的 ...
- Go语言_更多类型:struct、slice 和映射
更多类型:struct.slice 和映射 学习如何基于现有类型定义新的类型:本节课涵盖了结构体.数组.切片和映射. Go 作者组编写,Go-zh 小组翻译. https://tour.go-zh.o ...