【前面的话】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、自定义属性:
    2.1 任何浏览器都可以通过dom对象获取到标签的预定义属性
    2.2 chrome,新版IE(9及以上)无法获取标签的自定义属性;但IE8以前是可以通过dom对象获取到标签的自定义属性
    2.3 如何在任何浏览器中显示自定义属性呢??
            ——getAttribute可以获取标签的预定义属性;通过自定义属性获得的类型都是String
            ——设置属性的值:element.setAttribute(name,value)
            ——移除属性:element.removeAttribute(name)
附:
 element.className = " ";     //仅删除class类的值,保留类名
element.removeAttribute("class") //完全删除这个类
    2.4 属性的相关操作
 // 获取属性节点
var attrNode = box.getAttributeNode("id");
console.log(attrNode.nodeType); //属性节点的nodeType 2
console.log(attrNode.nodeName); //属性节点的nodeName 属性的名称
console.log(attrNode.nodeValue); //属性节点的nodeValue 属性的值 // 设置属性 setAttribute // 移除属性 removeAttribute
3、层次结构
——父节点:parentNode
    ① 子节点:

 childNodes  所有的子节点——DOM标准的方法,除了获取子标签以外,还会获取文本节点;IE8以前会忽略空白节点
children 所有的子元素——非标准的DOM方法,但是几乎所有的浏览器都支持,只会获取元素节点
    ② 兄弟节点,所有浏览器都支持
  element.nextSibling 下一个兄弟节点,可能是非元素节点,会获取到文本节点
element.nextElementSibling 获取下一个紧邻的兄弟元素,会忽略空白 // IE8以前不支持此属性 element.previousSibling 上一个兄弟节点,可能是非元素节点,会获取到文本节点
element.previousSibling 获取上一个紧邻的兄弟元素,会忽略空白 // IE8以前不支持此属性
    ③兄弟元素,IE8以前不支持

  previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点
 

DOM的相关概念的更多相关文章

  1. DOM API详解

    来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...

  2. javascript_19-DOM初体验

    DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...

  3. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  4. JS — 事件的相关概念和DOM

    JS是以事件驱动为核心的一门语言. 事件的三要素:事件源.事件.事件驱动程序. 例如: <body> <div id="box1"></div> ...

  5. 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

  6. 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. 遍历DOM树

    遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...

  8. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

  9. Web 开发相关概念

    Web 开发相关概念 前端 后端 全栈 前端 Front-end:网站中用户看到的部分 HTML CSS JavaScript 库和框架 设计工具 后端 Back-end:网站中用户看不到的部分 编程 ...

随机推荐

  1. C语言标准库之setjmp

    协程的介绍 协程(coroutine),意思就是“协作的例程”(co-operative routines),最早由Melvin Conway在1963年提出并实现.跟主流程序语言中的线程不一样,线程 ...

  2. 【洛谷3275】[SCOI2011] 糖果(差分约束系统入门题)

    点此看题面 大致题意: 有\(N\)个小朋友,要求每个人都得到糖果,且每个人的糖果总数满足一定的关系式,请你求出至少共分给小朋友们多少糖果. 关系式的转换 首先,我们可以将题目中给定的式子进行转换: ...

  3. 【洛谷3157】[CQOI2011] 动态逆序对(CDQ分治)

    点此看题面 大致题意: 给你一个从\(1\)到\(n\)的排列,问你每次删去一个元素后剩余的逆序对个数. 关于\(80\)分的树套树 为了练树套树,我找到了这道题目. 但悲剧的是,我的 线段树套\(T ...

  4. 2018.6.6 基于Oracle数据库的航天信息系统JDBC练习

    综合练习 一.语言和环境 A.实现语言 Java B.环境要求 JDK 6.0及其以上版本.MyEclipse7.5及其以上版本.Oracle11g.PL/SQL Developer 二.功能要求 开 ...

  5. dojo/Deferred类和dojo/promise类的使用

    参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181        https://dojotoolkit.org/docume ...

  6. 拷贝时间测试=cudamelloc+cudahostalloc

    /* * Copyright 1993-2010 NVIDIA Corporation. All rights reserved. * * NVIDIA Corporation and its lic ...

  7. java基础——线程池

    第2章 线程池 2.1 线程池概念 线程池,其实就是一个容纳多个线程的容器,其中的线程可以反复使用,省去了频繁创建线程对象的操作,无需反复创建线程而消耗过多资源. 我们详细的解释一下为什么要使用线程池 ...

  8. mysql中如何不重复插入,mysql 重复的不插入,mysql唯一的插入

    INSERT INTO new_schedules_spider_shipsname ( ID,SCAC,VESSEL,VOYAGE,SERVICE_NAME,MD5 ) SELECT NULL,%s ...

  9. LeetCode949-给定数字能组成的最大时间

    问题: 给定一个由 4 位数字组成的数组,返回可以设置的符合 24 小时制的最大时间. 最小的 24 小时制时间是 00:00,而最大的是 23:59.从 00:00 (午夜)开始算起,过得越久,时间 ...

  10. spark入门: wordcount-java

    wordcount-java: pom.xml文件如下: <dependencies> <dependency> <groupId>junit</groupI ...