DOM
DOM ( Document Object Model ):专门操作HTML内容的API
DOM是JavaScript的三个重要组成(ES(核心语法) DOM BOM)之一
核心DOM
能够操作所有结构化文档 (HTML,XML)
特点:万能的但是复杂而且繁琐
HTML DOM
专门操作HTML内容的API 常用的API进行简化
特点:简单但是并非是万能的
DOM Tree(节点树)
网页中一切在内存中都是以树形结构存储的
树形结构是存储上下级包含关系最直观的结构
HTML中的每一个元素(元素、属性、文本)都是一个节点对象(Node),其中document对象是整棵树的根节点
节点对象(Node)的三大属性
1、nodeType:专门区分节点的类型
document ==>> 9
element ==>> 1
attribute ==>> 2
text ==>> 3
2、nodeName:区分元素的名称
document ==>> #document
element ==>> 全大写的标签名
attribute ==>> 属性名
text ==>> #text
3、nodeValue:节点值
document ==>> null
element ==>> null
attribute ==>> 属性值
text ==>> 文本的内容
DOM操作:查、增、删、改
可以直接获得的三个元素
document.documentElement ==>> <html>
document.head ==>> <head>
document.body ==>> <body>
节点树:包含HTML中的每一个节点对象
1、父子关系
node.parentNode //获得node的父节点
node.childNodes //获得node的所有子节点
node.firstChild //获得node下的第一个子节点
node.lastChild //后的node下最后一个子节点
2、兄弟关系
node.preivousSibling //获得当前节点的前一个兄弟节点
node.nextSibling //获得当前节点的下一个兄弟节点
//注意:网页中的一切都是节点,包括换行和空字符
用元素树:仅包含元素节点的树结构,节点树的子集
1、父子关系
elem.parentElement //获得一个父元素对象
elem.childen //获得子元素对象集合
elem.firstElementChild //获得第一个子元素对象
elem.lastElementChild //获得最后一个子元素
2、兄弟关系
elem.preivousElementSibling //获得当前节点的前一个兄弟元素
elem.nextElementSibling //获得当前节点的下一个兄弟元素
HTML查找
在整个页面或者父元素下,查找属性或标签符合条件的元素对象
id
只能用document调用 仅返回一个元素
var div = document.getElementById("box");
tagName
查找指定父元素下的指定标签元素,任何父元素都可以调用
返回值放在集合中,没有找到符合要求的子节点,返回一个空数组
查找不仅只查直接子节点,而且查找所有子代节点
var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");
name
查找表单,只能用document调用
返回一个动态数组
var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");
class属性
查找的子代只要标签中class属性值符合要求的就被选中
var lis = nav.getElementsByClassName("active");