DOM的相关概念
【前面的话】DOM全称是Document Object Model,即文档对象模型。我们常说的html文档其实就是一个DOM树,DOM操作就是在内存中找到DOM树上我们想要的DOM对象,对它的属性进行修改,然后渲染引擎会把修改的结果重新绘制在界面上。DOM里面涵盖的知识点还是很多的,尤其是到后来要兼容浏览器的时候是很绕的,这次先讲一些DOM的相关概念,等聊完BOM之后,我会再针对兼容浏览器这块做个小总结。
1、节点的属性:
① nodeType
//节点
//nodeType 1-元素节点 , 2-属性节点 , 3-文本节点
② nodeName
// nodeName 如果是标签则返回的是标签的名称;如果是文本则返回的是#text;如果是属性节点则返回属性的名称
③ nodeValue
// nodeValue 如果是标签则始终返回null ; 如果是文本节点则返回文本的内容 ; 如果是属性节点则返回属性的值
④节点的复制
element.cloneNode(); // 克隆一个新的DOM对象;参数为Boolean类型,true赋值子节点,false不复制子节点
element.appendChild(); // 追加元素
2、自定义属性:
element.className = " "; //仅删除class类的值,保留类名
element.removeAttribute("class") //完全删除这个类
// 获取属性节点
var attrNode = box.getAttributeNode("id");
console.log(attrNode.nodeType); //属性节点的nodeType 2
console.log(attrNode.nodeName); //属性节点的nodeName 属性的名称
console.log(attrNode.nodeValue); //属性节点的nodeValue 属性的值 // 设置属性 setAttribute // 移除属性 removeAttribute
3、层次结构
childNodes 所有的子节点——DOM标准的方法,除了获取子标签以外,还会获取文本节点;IE8以前会忽略空白节点
children 所有的子元素——非标准的DOM方法,但是几乎所有的浏览器都支持,只会获取元素节点
element.nextSibling 下一个兄弟节点,可能是非元素节点,会获取到文本节点
element.nextElementSibling 获取下一个紧邻的兄弟元素,会忽略空白 // IE8以前不支持此属性 element.previousSibling 上一个兄弟节点,可能是非元素节点,会获取到文本节点
element.previousSibling 获取上一个紧邻的兄弟元素,会忽略空白 // IE8以前不支持此属性
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点
DOM的相关概念的更多相关文章
- DOM API详解
来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...
- javascript_19-DOM初体验
DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- JS — 事件的相关概念和DOM
JS是以事件驱动为核心的一门语言. 事件的三要素:事件源.事件.事件驱动程序. 例如: <body> <div id="box1"></div> ...
- 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么
0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...
- 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 遍历DOM树
遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
- Web 开发相关概念
Web 开发相关概念 前端 后端 全栈 前端 Front-end:网站中用户看到的部分 HTML CSS JavaScript 库和框架 设计工具 后端 Back-end:网站中用户看不到的部分 编程 ...
随机推荐
- C语言标准库之setjmp
协程的介绍 协程(coroutine),意思就是“协作的例程”(co-operative routines),最早由Melvin Conway在1963年提出并实现.跟主流程序语言中的线程不一样,线程 ...
- 【洛谷3275】[SCOI2011] 糖果(差分约束系统入门题)
点此看题面 大致题意: 有\(N\)个小朋友,要求每个人都得到糖果,且每个人的糖果总数满足一定的关系式,请你求出至少共分给小朋友们多少糖果. 关系式的转换 首先,我们可以将题目中给定的式子进行转换: ...
- 【洛谷3157】[CQOI2011] 动态逆序对(CDQ分治)
点此看题面 大致题意: 给你一个从\(1\)到\(n\)的排列,问你每次删去一个元素后剩余的逆序对个数. 关于\(80\)分的树套树 为了练树套树,我找到了这道题目. 但悲剧的是,我的 线段树套\(T ...
- 2018.6.6 基于Oracle数据库的航天信息系统JDBC练习
综合练习 一.语言和环境 A.实现语言 Java B.环境要求 JDK 6.0及其以上版本.MyEclipse7.5及其以上版本.Oracle11g.PL/SQL Developer 二.功能要求 开 ...
- dojo/Deferred类和dojo/promise类的使用
参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181 https://dojotoolkit.org/docume ...
- 拷贝时间测试=cudamelloc+cudahostalloc
/* * Copyright 1993-2010 NVIDIA Corporation. All rights reserved. * * NVIDIA Corporation and its lic ...
- java基础——线程池
第2章 线程池 2.1 线程池概念 线程池,其实就是一个容纳多个线程的容器,其中的线程可以反复使用,省去了频繁创建线程对象的操作,无需反复创建线程而消耗过多资源. 我们详细的解释一下为什么要使用线程池 ...
- mysql中如何不重复插入,mysql 重复的不插入,mysql唯一的插入
INSERT INTO new_schedules_spider_shipsname ( ID,SCAC,VESSEL,VOYAGE,SERVICE_NAME,MD5 ) SELECT NULL,%s ...
- LeetCode949-给定数字能组成的最大时间
问题: 给定一个由 4 位数字组成的数组,返回可以设置的符合 24 小时制的最大时间. 最小的 24 小时制时间是 00:00,而最大的是 23:59.从 00:00 (午夜)开始算起,过得越久,时间 ...
- spark入门: wordcount-java
wordcount-java: pom.xml文件如下: <dependencies> <dependency> <groupId>junit</groupI ...