DOM选择器,节点类型

对节点的增删改查

查看元素节点

  1. document代表整个文档
  2. document.getElementById() //元素id 在Ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
  3. .getElementsByTagName() // 标签名,最常用
  4. getElementsByName(); //,IE不支持需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
  5. .getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起
  6. .querySelector() // css选择器 在ie7和ie7以下的版本中没有,不实时,所以基本不用
  7. .querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有,不实时,所以基本不用

基于元素节点树的遍历

  1. parentElement - > 返回当前元素的父元素节点(IE不兼容)
  2. children -> 只返回当前元素的元素子节点
  3. node.childElementCount === node.children.length 当前元素节点的子元素节点的个数(IE不兼容)
  4. firstElementChild -> 返回的是第一个子元素节点(IE不兼容)
  5. lastElementChild -> 返回的是最后一个子元素节点(IE不兼容)
  6. nextElementSibling/previousElementSibling - > 返回后一个/前一个兄弟元素节点(IE不兼容)

遍历节点树

  1. parentNode - > 父节点(最顶端的parentNode 为 #document)

  2. childNode -> 子节点们

  3. firstChild -> 第一个子节点

  4. lastChild -> 最后一个子节点

  5. nextSibling -> 后一个兄弟节点

  6. previousSibling -> 前一个兄弟节点

节点的类型

  • 元素节点 --- 1
  • 属性节点 --- 2
  • 文本节点 --- 3
  • 注释节点 --- 8
  • document --- 9
  • DocumentFragment --- 11

nodeType -> 获取节点类型

Element节点的一些属性

  1. innerHTML

  2. innerText(火狐不兼容) / textContent(老版本IE不好使)

Element节点的一些方法

  1. ele.setAttribute()

  2. ele.getAttribute();

你可能感兴趣的:(DOM选择器,节点类型)