JaveScript 之 DOM 操作

304 查看

DOM操作

DOM:Document Object Model 的缩写

节点的分类

1.元素节点(重点) --  <div> <p>
2.注释节点  -- <!--p标签的使用-->
3.文本节点 -- 文本部分
4.文档节点  -- document 
5.声明节点   -- DOCTYPE

获取标签元素对象方式

1.nodeName.getElementById(name) 
  获取nodeName节点下的id名为name的元素,
  节点对象(只有一个)
2.nodeName.getElementsByClassName(name)
  获取nodeName节点下的类名为name的所有元素
  节点对象(返回值是数组,一个或多个元素节点对象)
3.nodeName.getElementsByTagName(name)
  获取nodeName节点下的标签名为name的所有
  元素节点对象(返回值是数组,一个或多个
  元素节点对象)
4.nodeName.querySelector(name)
  获取nodeName节点下的(标签名或者类名或者id名)
  第一个元素节点(只有一个)
5.nodeName.querySelectorAll(name)
  获取nodeName节点下的符合name
  (标签名或者类名或者id名)要求的所有
  元素节点(返回值是数组,一个或多个
  元素节点对象)

特殊标签

-	-
文档节点	document
声明节点	doctype
body 节点	body
head 节点	head
title 节点	title

节点之间的关系

1.父节点
2.子节点
3.兄弟节点

获取节点

以 ul 为例 id 名为 ul1

-	-
获取子节点	ul1.childNodes
获取父节点	ul1.parentNode
获取第一个子节点	firstChild
获取最后一个节点	ul1.lastChild
下一个相邻兄弟节点	ul.1nextSibling
上一个相邻兄弟节点	ul1.previousSibling
获取第一个子元素节点	ul1.firstElementChild
获取所有的子元素节点	ul1.children
获取最后一个子元素节点	ul1.lastElementChild
获取上一个相邻兄弟元素节点	ul1.previousElementSibling
获取下一个相邻兄弟元素节点	ul1.nextElementSibling

节点的属性

节点值: nodeValue.

console.log(###,nodeValue)
若###为文本节点或者注释节点,则打印内容;
若###为元素节点,则输出null;

节点类型

元素节点 ------ 1
文本节点 ------ 3
注释节点 ------ 8
文档节点  ------ 9
声明节点 ------ 10

节点名称 nodeName

1.文本节点  ---- #text
2.注释节点 ----- #comment
3.元素节点 ----- 输出该标签名的大写

往元素节点中添加内容（获取该元素节点的内容）

1.innerHTML 获取该元素节点里的所有内容(开始标签到结束标签之间的内    容), 包括文本节点,注释节点,元素节点
2.innerText  获取该元素节点里的所有文本节点
  console.log(contentDiv.innerHTML);

设置节点的属性

-	-
删除属性	removeAttribute('value')
创建节点	createElement('div')
插入节点	appendChild(div3)
将元素节点a插入到元素节点b之间	insertBefore(a,b)
将a和b节点进行替换	replaceChild(a,b)
删除标签	removeChild(a);