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相关的更多相关文章

  1. javascript;Dom相关笔记

    document.ondblclick 页面双击事件document.title.charAt(0) 取标题第1个字符串window.alert  弹出消息对话框window.confirm 显示确定 ...

  2. javascript DOM相关语法

    childNodes: 获取元素内的所有节点 包括文本节点:nodeType=3 , 元素节点:nodeType = 1 nodeType:它可以判断所有节点的类型 元素节点类型:1 文本节点:3 注 ...

  3. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  5. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  6. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  7. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  8. javascript 事件相关使用总结01

    javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍 注册事件最基础的函数是这个 target.addEventListener(t ...

  9. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

随机推荐

  1. hdu6395 /// 分块矩阵快速幂

    题目大意: F(1)=A, F(2)=B,  F(i)=C*F(i-2)+D*F(i-1)+p/i(向下取整) 给定A B C D p n 求F(n) 构造 矩阵A *   矩阵B        =  ...

  2. cocos2dx 3.9 微信授权登陆后游戏进程结束解决办法

    找到 Cocos2dxActivity.java 文件夹 里面的 onDestroy() 方法 if (mGLSurfaceView != null) {            Cocos2dxHel ...

  3. boost 大小端转换

    boost 中有一个edmian 里面有转换函数模板 native_to_little<T> 本地转换为小端 native_to_bit<T> 本地转换为大端

  4. Linux系统的buff/cache缓存清理脚本

    cacheClean.sh #!/bin/bash # 日期: # 作者: 黄慧丰/何鹏举 # 说明: fastdfs所在的linux系统的buffer cache过大, 且并没有有效的自动回收, 因 ...

  5. jenkins构建结果企业微信提醒

    每当jenkin在构建之后我们想把构建结果SUCCESS/FAILURE或者其他信息通知给其他人,也许有人会说,不是有邮件提醒吗?但是我这里的环境邮件提醒的话所被通知者并不会第一时间去阅读,所以我们用 ...

  6. 移动端布局 + iscroll + 滚动事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. net core静态文件 访问除默认目录文件配置

    在我们项目的实际应用中,不光是需要访问默认静态文件夹 wwwroot ,还有可能要要去访问除默认目录以外的文件夹,接下来我们进行配置 1.在根目录创建一个文件夹,继续创建它的子文件夹Images,在I ...

  8. 【RabbitMQ】六种模式与SpringBoot整合

    添加rabbitmq的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  9. Openssl命令的使用

    用途: pkcs8格式的私钥转换工具.它处理在PKCS#8格式中的私钥文件.它可以用多样的PKCS#5 (v1.5 and v2.0)和 PKCS#12算法来处理没有解密的PKCS#8 Private ...

  10. 大转盘抽奖css3+js(简单书写)

    今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...