type
Post
status
Published
date
Mar 22, 2020
slug
frontend-1
summary
前端开发入门系列
tags
前端
JavaScript
category
技术分享
icon
password

获取DOM元素

document.getElementById()

在文档中根据元素Id选择元素

[context].document.getElementsByTagName()

在指定容器中，根据标签名获取元素集合

[context].getElementsByClassName()

在指定容器中，根据元素class名称获取元素集合(不兼容IE6·8)

document.getElementsByName()

在整个文档中，根据标签的Name属性获取节点集合，在IE中，只有表单元素的Name才能被识别

document.head/body/documentElement

返回文档中的head标签、Body标签、整个文档元素

[context].querySelector([select])

在指定容器中通过选择器（类比css选择器）获取指定元素对象（不兼容IE6·8）

[context].querySelectorAll([select])

在指定容器中通过选择器（类比css选择器）获取指定节点集合（不兼容IE6·8）
在 HTML DOM （文档对象模型）中，每个部分都是节点：
  • 文档本身是文档节点
  • nodeType: 9
  • nodeValue: null
  • nodeName: #document
  • 所有 HTML 元素是元素节点（元素标签）
  • nodeType: 1
  • nodeValue: null
  • nodeName: 大写标签名
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
  • nodeType: 3
  • nodeName: '#text'
  • nodeValue: 文本内容
  • 注释是注释节点
  • nodeType: 8
  • nodeName: '#common'
  • nodeName: 注释内容

元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点

描述节点关系的属性

1.childNodes

获取所有子节点，得到节点集合

2.chidren

获取所有元素子节点（子元素标签）

3.firstChild

获取第一个子节点

4.lastChild

获取最后一个子节点

5.firstElementChild/lastElementChild

获取第一个/最后一个 元素子节点（不兼容IE6、7、8）

6.previousSibling

获取上一个哥哥节点

7.nextSibling

获取下一个弟弟节点

8.previousElementSibling/nextElementSibling

获取上一个/下一个元素节点（不兼容IE6、7、8）

节点的增删克隆操作