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. usb-host与外设通信(二)

    本文是接着上一篇的的usb-host与外设通信(一)接着写的 3.枚举设备 当你的程序运行时,如果应用程序对当前连接的USB设备都感兴趣的,程序可以枚举所以当前的设备.使用getDeviceList( ...

  2. keepAlived常见问题

    1.脑裂问题 1.定义: 在一个高可用(HA)系统中,当关联着的两个结点互相之间断开通信时,本来为一个独立的对外提供服务的系统分裂为两个独立的结点,这时两个结点会争抢资源.(keepAlived 中表 ...

  3. 制作一个自己的xhprof测试平台

    1 1.首先安装php开发环境,比如lnmp. 2.安装xhprof ps: 记住从github上面下载(https://github.com/phacility/xhprof), 不要从pecl.p ...

  4. vue中this.$refs可以拿到,但是里面的属性undefind的问题

    1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素 2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$re ...

  5. etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc等配置文件区别

    什么是交互式shell和非交互式shell,什么是login shell 和non-login shell. 交互式模式:就是shell等待你的输入,并且执行你提交的命令.这种模式被称作交互式是因为s ...

  6. Jenkins 搭建 .NET FrameWork 持续集成环境

    本文不赘述如何安装 Jenkins,如有需要请看之前文章,这里我们主要搭建 .Net 环境.本文是在 Windows 环境下安装的 Jenkins 进行操作     一.安装所需环境     这里我们 ...

  7. 【PKUWC2018】猎人杀

    题目描述 题目分析 设\(W=\sum\limits_{i=1}^nw_i\),\(A=\sum\limits_{i=1}^nw_i[i\ is\ alive]\),\(P_i\)为下一个打中\(i\ ...

  8. leetcood学习笔记-88-合并两个有序数组

    题目描述: 第一次提交: class Solution: def merge(self, nums1: List[int], m: int, nums2: List[int], n: int) -&g ...

  9. 一次Spring Transactional嵌套事务使用不同的rollbackFor的分析

    起因: 项目期间由于一次异常回滚问题,发现自己在事务知识方面知识的遗漏,趁着这次机会,做了几次rollbackFor的测试. 测试:   现在有两个事务,事务oute包含事务Inner.事务A回滚规则 ...

  10. maven项目打成jar包之前需要在pom文件做的准备工作

    文章目录 pom.xml 很多时候在eclipse中没问题java -jar没有主类,或者classnotfound pom.xml <build> <plugins> < ...