JavaScript - DOM相关
DOM节点分类 ( node ) :
元素节点 ( element node )
属性节点 ( attribute node )
文本节点 ( text node)
DOM的相关操作 :
1. 查询元素
<script> window.onload = function() { // 1. 直接获取元素节点 // 通过id属性获取指定元素, 返回一个节点对象
var ele = document.getElementById("username");
console.log(ele); // 通过name属性获取元素, 返回多个节点对象(数组)
var eles = document.getElementsByName("hobby");
for (var i=0; i<eles.length; i++) {
console.log(eles[i]);
} // 通过标签名获取元素, 返回多个节点对象(数组)
var tagEles = document.getElementsByTagName("input");
for (var i=0; i<tagEles.length; i++) {
console.log(tagEles[i]);
} // 2. 间接获取元素节点, 根据层次关系查找 // 同过获取的元素节点, 查找父元素节点
var selEle = document.getElementById("son").parentElement;
console.log(selEle); // 通过获取的元素节点, 查找子元素节点, 返回所有子节点(数组)
// childNodes : 返回节点的子节点集合, 包括元素节点,文本节点和属性节点
// children : 只返回节点的子元素集合
// var childEles = document.getElementById("father").childNodes;
var childEles = document.getElementById("father").children;
for (var i=0; i<childEles.length; i++) {
console.log(childEles[i]);
} // 获取元素的第一个子节点和最后一个子节点
// firstChild, lastChild : 获取的子元素包含元素节点, 文本节点和属性节点
// firstElementChild, lastElementChild : 只会获取到子元素
var childFirst = document.getElementById("father").firstElementChild;
var childLast = document.getElementById("father").lastElementChild;
console.log(childFirst);
console.log(childLast); // 3. 获取兄弟节点 // 获取元素的上一个元素和下一个元素
var preEle = document.getElementById("brother").previousElementSibling;
var nextEle = document.getElementById("brother").nextElementSibling;
console.log(preEle);
console.log(nextEle); }; </script>
<input type="text" id="username" value="Tom" /> <input type="checkbox" name="hobby" value="aaa" />
<input type="checkbox" name="hobby" value="bbb" />
<input type="checkbox" name="hobby" value="ccc" /> <select id="father">
<option id="son" value="1">111</option>
<option id="brother" value="2">222</option>
<option value="3">333</option>
</select>
2. 操作文本
<script> window.onload = function() { // 操作文本
var ele = document.getElementById("txt"); // 获取文本
console.log(ele.innerHTML); // innerHTML : 获取内容包括标签
console.log(ele.innerText); // innerText : 获取内容不包括标签 // 插入文本
ele.innerHTML = "<h3>Hello</h3>"; // innerHTML : 插入文本时, 会解析标签
ele.innerText = "<h3>Hello</h3>"; // innerText : 插入文本时, 不会解析标签 }; </script> <h1 id="txt">
<span>Hello,World!</span>
</h1>
3. 操作属性
<script> function editButton() { // 操作元素的属性 var btn = document.getElementById("btn"); // 点(btn.a)的形式获取和修改元素的属性, 只能操作元素自带的属性, 不能操作自定义属性
// 操作属性可以用 setAttribute() 和 getAttribute(); // 获取元素属性
console.log(btn.value);
console.log(btn.a); // 不能获取自定义属性
console.log(btn.getAttribute("value"));
console.log(btn.getAttribute("a")); // 修改元素属性
btn.value = "Hello, JavaScript";
btn.a = "c"; // 修改不了自定义属性
console.log(btn);
btn.setAttribute("value", "Attribute");
btn.setAttribute("a", "d"); } </script> <input id="btn" type="button" a="b" value="Hello,World" onclick="editButton()" />
4. 操作元素
// 操作元素 // 创建节点
document.createElement("nodeName"); // 添加节点
parentNode.appendChild(childNode); // 在末尾添加
parentNode.insertBefore(newNode, beforeNode); // 在指定节点前添加 // 删除节点
parentNode.removeChild(childNode); // 替换节点
parentNode.replaceChild(newNode, oldNode);
5. 操作CSS样式
<style>
.cls { color: red; }
</style> <script>
window.onload = function() {
// 操作CSS样式
var s = document.getElementById("a").style; // 获取到元素的style对象
s.color = "green"; // style对象的属性和CSS的属性相对应
s.fontSize = "30px"; // 多个单词组成的属性, 需使用驼峰写法 // 操作元素的class属性, 应使用className
var s2 = document.getElementById("b");
s2.className = "cls";
}
</script> <span id="a">aaa</span>
<span id="b">bbb</span>
JavaScript - DOM相关的更多相关文章
- javascript;Dom相关笔记
document.ondblclick 页面双击事件document.title.charAt(0) 取标题第1个字符串window.alert 弹出消息对话框window.confirm 显示确定 ...
- javascript DOM相关语法
childNodes: 获取元素内的所有节点 包括文本节点:nodeType=3 , 元素节点:nodeType = 1 nodeType:它可以判断所有节点的类型 元素节点类型:1 文本节点:3 注 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- javascript 事件相关使用总结01
javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍 注册事件最基础的函数是这个 target.addEventListener(t ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
随机推荐
- 8-MySQL-Ubuntu-数据表中数据的增加(一)
增(insert) (1)全部字段插入数据:按表中字段顺序增加数据 注:(1)主键字段可以使用0/null/default来占位.(2)gender字段中数据类型是枚举,可以使用索引数字1,2,3,4 ...
- wpf中datagrid绑定数据源发生改变
1.若datagrid绑定的数据源是同一个的话,即使里面的数据不同.页面也不会刷新,则需要重置数据源,再绑定.处理如下: datagrid1.ItemsSource=ListModule; 若List ...
- 微信小程序--学习的案例
一.「程序秀」 「程序秀」这个小程序非常特别,因为它是一个可以帮助别人开发小程序的小程序.它以「即速应用」这个无需代码一键生成微信小程序的开发工具为基础,为广大开发爱好者提供小程序开发的最新资讯和培训 ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- 清除浮动的方法(float)
方式一: 额外标签法:给浮动的元素后面新增加一个清除浮动的盒子 例如: <div style="float: left">浮动盒子</div> <di ...
- MyBatis是如何使用的?
MyBatis前身世iBatis本是Apache的一个开源项目,2010年这个项目迁移到google code并改名为MyBatis. 一.高级软件介绍 1.JDK 8 2.Eclipse mars2 ...
- element中的tree组件实现菜单分配
返回的菜单数据 tree组件的使用 <el-tree ref="menuList" // :data="menuList" // 展示数据 :props= ...
- mongodb常用基本命令
一.数据库常用命令 1.help查看命令提示 help db.help() db.test.help() db.test.find().help() 2.创建.切换数据库 use movies 3.查 ...
- C++11的闭包(lambda、function、bind)
c++11开始支持闭包,闭包:与函数A调用函数B相比较,闭包中函数A调用函数B,可以不通过函数A给函数B传递函数参数,而使函数B可以访问函数A的上下文环境才可见(函数A可直接访问到)的变量:比如: 函 ...
- hdu第九场多校
02:线段树两次扫描 #include<bits/stdc++.h> #include<vector> using namespace std; #define maxn 30 ...