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 ...
随机推荐
- USACO Running Away From the Barn /// 可并堆 左偏树维护大顶堆
题目大意: 给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于等于m的点有多少个 左偏树 https://blog.csdn.net/pengwill97/article/details/82 ...
- docker容器和宿主机时间不一致的问题
第1种:复制宿主机的localtime文件,到容器里docker cp /etc/localtime threg:/etc/ 注:这里 threg为容器名称,复制完后需重启容器 第2种在构建docke ...
- JAVA里面的int类型 和Integer类型,有什么不一样
JAVA里面的int类型 和Integer类型,有什么不一样 原创 2013年09月04日 23:15:11 标签: java / 2120 编辑 删除 JAVA里面的int类型 和Integer类型 ...
- c++ const (转)
在C++的类定义里面,可以看到类似下面的定义: class List { private: Node * p_head; int length; …… Public: int GetLength () ...
- set -x 调试shell
在上面的结果中,前面有“+”号的行是shell脚本实际执行的命令,前面有“++”号的行是执行trap机制中指定的命令,其它的行则是输出信息. shell的执行选项除了可以在启动shell时指定外,亦可 ...
- dev中 ,usercontrol打印界面内容,打印预览和打印
首先,在对应的文件夹下面添加引用,如下图 如果没有就下载下来包. 预先在本地文件夹下面建立.frx文件,像这样的, 然后在触发事件下面写 //打印预览 private void btn_Preview ...
- map方法的简单使用
假设有一个数组a,将a中的数值以2倍的形式放到b数组中 <!DOCTYPE html> <html lang="en"> <head> < ...
- vue 外卖app (1) 项目目录介绍
api 与后台交互文件夹 common 通用资源文件夹 components 非路由组件文件夹 filters 自定义过滤器模块文件夹 mock 模拟数据文件夹 pages 路由组件文件夹 r ...
- 转化json里面的特殊字符
前几天要做一个接受图片地址并将图片地址存放在数据库中,发现图片地址中有好多特殊字符反斜杠,中括号之类的,下面就是解决这个问题的代码 public String StringToJson(String ...
- Go 静态类型声明
Go 静态类型声明 package main import "fmt" func main() { var x float64 x = 20.0 fmt.Println(x) fm ...