DOM-文档概述、文档节点、元素节点

最新推荐文章于 2022-10-30 16:57:50 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2022-10-30 16:57:50 发布

阅读量558

点赞数

分类专栏： DOM 文章标签： DOM

本文链接：https://blog.csdn.net/wstpa/article/details/50011105

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、DOM:文档对象模型，是由JavaScript节点对象组成的层次结构/树

1、节点对象类型：nodeType(共用12种类型，仅列出了常用的几个)
ELEMENT_NODE = 1 元素节点  如 ：<body> <div> <script> <html>
ATTRIBUTE_NODE = 2 属性节点  如 ：<class> <href> <alt> <title>
TEXT_NODE = 3 文本节点  如 ：P标签中的文字
COMMENT_NODE = 8 注释节点 
DOCUMENT_NODE = 9  DOM 树的根节点 如 ：document
DOCUMENT_TYPE_NODE = 10 向为文档定义的实体提供接口 如: <!DOCTYPE html>

2、用于与节点打交道的属性与方法
（1）节点属性
    .nodeType 节点对象类型

    .childNodes (会获取到空白节点,ie6-8除外。空白节点算做文本节点)
    .children (仅获取到元素节点，无兼容问题)

    .firstChild (会获取到空白节点,ie6-8除外，但会获取到文本节点)
    .firstElementChild (仅获取元素节点，但ie6-8不支持)

    .lastChild (会获取到空白节点,ie6-8除外，但会获取到文本节点)
    .lastElementChild (仅获取元素节点，但ie6-8不支持)

    .nextSibling (会获取到空白节点,ie6-8除外，但会获取到文本节点)
    .nextElementSibling (仅获取元素节点，但ie6-8不支持)

    .previousSibling (会获取到空白节点,ie6-8除外，但会获取到文本节点)
    .previousElementSibling (仅获取元素节点，但ie6-8不支持)

    兼容处理，请移步http://blog.csdn.net/wstpa/article/details/50009323

    .nodeName  元素节点的标签名，大写。 document -> #document 文本节点 -> #text (固定的)
    .nodeValue 元素节点 ：nodeValue值始终为null，document：null，文本节点：文本内容

    .parentNode 父节点

（2）节点方法
    .appendChild()
    .insertBefore()
    .removeChild()
    .replaceChild()
    .cloneNode()  默认是深复制(true)，但不复制元素的事件操作。可能导致重复的ID

    .contains()
    .compareDocumentPosition() 表示两个节点彼此做比较的位置
    .hasChildNodes()
    .isEqualNode()  检查两个元素是否完全相等。如果只想知道两个节点是否指向同一节点，可以直接用===操作符判断

（3）文档方法
    。document.createElement()
    。document.createTextNode()

（4）HTML*Element属性
    .innerHTML  (用它就好，尽量不用innerText)请查看：http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx
    .outerHTML
    .textContent
    .innerText
    .outerText

3、识别节点的类型与名称
    document.body.nodeType  //1元素节点
    document.body.nodeName //BODY
4、获取节点的值，nodeValue
    绝大多数节点类型（除了text和comment）的nodeValue值都是null。它的作用是获取text和comment节点的实际文本字符串
    document.body.nodeValue //null
5、JavaScript方法创建元素和文本节点
    var oDiv = document.createElement('div');
    var oText = document.createTextNode('hello world');

二、文档节点

1、HTML文档(document)属性与方法(一些)
    .doctype
    .documentElement
    .implementation.*
    .activeElement  获取文档中当前聚焦/激活节点的引用
    .body
    .head
    .title
    .lastModified
    .referrer
    .URL
    .defaultview 到达顶部/全局对象的捷径，在web浏览器中顶部对象即window Object,在浏览器JavaScript环境中指向这个js对象
    .compatMode
    .ownerDocument 从某一元素获得文档的引用
    .hasFocus() 判断文档或者文档中任何节点得到焦点
2、获取HTML Document通用信息(标题、链接、提及者、最后修改时间及兼容模式)
    document.title
    document.URL
    document.referrer
    document.lastModified
    document.compatMode  //BacKCompat （怪异模式） 和CSS1compat （严格模式）
3、文档子节点
    document节点可以包含一个DocumentType节点对象和一个Element节点对象。因为通常HTML文档只包含一个文档类型（<!DOCTYPE html>）与一个元素节点（<html lang="n">）
4、document提供的捷径
    。document.doctype （<!DOCTYPE html>）
    。document.documentElement (<html lang="n">)
    。document.head (<head>)
    。document.body(<body>)
5、document.implementation.hasFeature()探测DOM规范/特性
    document.implementation.hasFeature()询问当前文档都实现/支持了哪些特性与层级，通过将该特性的名称和版本作为参数传入hasFeature();
    document.implementation.hasFeature('Core','3.0');

三、元素节点

HTML文档中每个元素都有一个唯一的本源，即每个都有一个独一无二的JavaScript构造函数，使这些元素实例化为DOM数中的节点对象，例如，<a>元素是由HTMLAnchorElement()创建的。
1、HTML*Element对象属性与方法
    .createElement() 创建元素
    .tagName 标签名
    .children
    .getAttribute() 能获取自定义的属性，但是通过setAttribute设置自定义属性会添加到元素的行间，用“.”操作符就不会
    .setAttribute()  自定义的可以采用html5中的dataset
    .hasAttribute()  判断元素是否有某一特定属性
    .removeAttribute()
    .dataset
    .attributes  获取元素属性与值得列表/集合，返回的数组是实时的
2、获取class属性值列表 - classList
    console.log(oDiv.classList) // DOMTokenList["a", "b", "c"]
    console.log(oDiv.className) //a b c

    classList自身只读但是可以用add()、remove()、contains()、toggle()方法修改
3、获取与设置data-*属性 (IE9中不支持)
    元素节点的dataset属性提供了一个对象，包含改元素所有以data-*起始的属性。因为它就是一个JavaScript对象，我们可以操作dataset并反馈这些改动到DOM中的元素上。
    <div data-foo-foo="foo" data-bar-bar="bar"></div>
    //读取
    console.log(oDiv.dataset.fooFoo)
    //设置
    oDiv.dataset.gooGoo = "goo";

四、元素节点选取

1、选取特定的元素节点
使用这两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到预期结果。
    .querySelector()  将返回文档中符合该选择器的首个元素节点。
    .querySelectorAll() 该方法返回所有满足条件的元素，结果是个nodeList集合。但是该方法并不返回一个实时的元素列表

    .getElementById()
    .getElementsByTagName()

2、预定义的元素节点选取/列表
document.all  HTML文档中所有元素。FF不支持
document.forms  HTML文档中所有<form>元素
document.images  HTML文档中所有<img>元素
document.links  HTML文档中所有<a>元素
document.scripts  HTML文档中所有<script>元素
document.styleSheets  HTML文档中所有<link>或者<style>元素

3、使用matchesSelector()验证元素是否被选取,返回true or false
例子：选择了<ul>中首个<li>并询问该元素是否匹配选择器 li:first-child.
//需要加前缀
console.log(document.querySelector('li').matchesSelector('li:first-child'))

见面时的呼吸都曾反复练习

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM-文档概述、文档节点、元素节点

一、DOM:文档对象模型，是由JavaScript节点对象组成的层次结构/树1、节点对象类型：nodeType(共用12种类型，仅列出了常用的几个)ELEMENT_NODE = 1 元素节点如：<body> <div> <script> <html>ATTRIBUTE_NODE = 2 属性节点如：<class> <href> <alt> <title>TEXT_NODE = 3
复制链接

扫一扫