【前面的话】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. 倍增LCA

    前言 在做树上问题时,我们经常会遇到 \(LCA\)(最近公共祖先)问题.曾经的我遇到这类问题只会\(O(n)\)暴力求解,学了倍增\(LCA\),就可以\(O(logn)\)解决了. 简介 倍增\( ...

  2. python_61_装饰器4

    import time def timer(func):#timer(test1) func=test1 def deco(): start_time=time.time() func()#run t ...

  3. 【转】浅谈Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  4. 漫谈 Clustering (番外篇): Expectation Maximization

    Expectation Maximization (EM) 是一种以迭代的方式来解决一类特殊最大似然 (Maximum Likelihood) 问题的方法,这类问题通常是无法直接求得最优解,但是如果引 ...

  5. 解决Win10桌面右键卡顿一直转圈圈的

    把系统重置之后,发现在桌面点击右键时一直转圈,但是在文件夹等非桌面位置都正常.可能是我之前修改注册表添加右键选项造成的,也可能不是,因为将修改的地方删除还是没有解决问题,555. 上网搜素一波,发现大 ...

  6. 第31题:LeetCode946. Validate Stack Sequences验证栈的序列

    题目 给定 pushed 和 popped 两个序列,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true:否则,返回 false . 示例 1: 输入: ...

  7. content is king – Bill Gates (1/3/1996) 内容为王 - 比尔盖茨

    以下中文版本由谷歌翻译 内容为王 - 比尔盖茨(1/3/1996) 内容是我期望在互联网上赚取大部分真钱的地方,就像在广播中一样. 半个世纪前开始的电视革命催生了许多行业,包括制造电视机,但长期的赢家 ...

  8. LOL游戏基本代码

    class Hero: def __init__(self, new_nickname, new_aggressivity, new_life_value, new_money, new_armor ...

  9. 【java】A local class access to local variables

    内部类参考 A local class has access to local variables. However, a local class can only access local vari ...

  10. Tesseract-ocr视觉学习-验证码识别及python import pytesseract使用

    Tesseract-OCR的简单使用与训练 最近看到某个网站提交数据要提交验证码,用tesseract自带的识别, 识别出来是什么鬼,0-9识别成了什么玩意! so决定自己训练下tesseract.. ...