DOM的基本知识点汇总

快来打我* 2023-07-02 11:21 13阅读 0赞

## *DOM*（文档对象模型）的概念 ##

1.  D (document)  
    文档表示的就是整个的HTML文档
2.  O (object)  
    对象表示将网页文档中的每一部分都看作对象
3.  M (model)  
    使用模型来表示对象之间的关系，这样方便获取指定的对象

--------------------

## 节点 （构成HTML文档最基本的单元） ##

1.  文档节点 整个HTML文档
2.  元素节点 HTML文档中的HTML标签
3.  属性节点 元素的属性
4.  文档节点 HTML标签中的文本内容

--------------------

## 节点的属性 ##

NodeName    NodeType    NodeValue
    
            文档节点     #document      9           null
            元素节点       标签名        1           null
            属性节点       属性名        2           属性值
            文本节点       #text        3          文本内容

--------------------

## 事件 ##

--就是文档或者浏览器窗口中发生的一些特定的交互瞬间
     --对于web应用来说，有下面代表性的事件：点击某个元素、将鼠标移至 某个元素的上方、按下鼠标上的键

--------------------

## 获取元素节点 ##

--document进行调用

1.  getElementById() 通过id属性来获取一个元素节点对象
2.  getElementsByTagName() 通过标签名来获取一组元素节点对象
3.  getElementsByName() 通过name属性获取一组元素节点对象
4.  body 保存的时document的引用
5.  documentElement 保存HTML的根标签
6.  all 可以获取HTML页面中的所有的元素（对象数组）  
    等价于getElementByTagName("\*")
7.  getElementsByClassName(“class属性值”)  
    根据元素的class属性值查询一组节点对象（该方法不支持IE8及以上）
8.  queryselector("选择器”) 需要一个选择器字符串作为参数，可以根据一个css选择器来查询一个元素节点对象  
    注意：使用该方法只能查询一个元数，即使满足条件的结果有多个，也只会返回第一个  
    此时需要使用 querySelector()来进行代替，此方法即使满足条件的元素只有一个也会返回一个元素对象数组
    
        -补充：
          innerHtml 用于获取元素内部的HTML代码
          对于自结束标签，这个属性没有意义
          如果直接读取元素节点的属性直接使用 元素.属性名的格式进行读取
          例如：元素.id 元素.name 元素.value
          注意：class属性不能采用这个格式 要使用 元素.className 来获取class的属性值

--------------------

## 获取元素节点的子节点 ##

--通过具体的元素节点进行调用

1.  getElementByTagName()  
    方法，返回当前节点的指定标签名的后代节点
2.  childNodes  
    属性，获取当前节点所有的子节点（包括文本在内的所有节点）
3.  firstChild  
    属性，表示当前节点的第一个子节点
4.  lastChild  
    属性：表示当前节点的最后一个节点
5.  children  
    属性，可以获取当前元素所有的子元素
6.  firstElementChild  
    属性，可以获取当前元素的第一个子节点

--------------------

## 获取父节点和兄弟节点 ##

--通过具体的节点进行调用

1.  parentNode 属性，表示当前节点的子节点
2.  previousSibling 属性，表示当前节点的前一个兄弟节点
3.  nextSibling 属性，表示当前节点的后一个兄弟节点
    
        补充
            innerHTML 可以获取元素内部的HTML代码
            innerText 可以将元素的文本内容进行返回，没有附带标签