DOM官方定义
DOM,Document Object Model,文档对象模型,我们可以把网页中的所有“东西”看成是对象“;
DOM的官方定义:DOM可以使用脚本,动态的访问或操作,网页的仙鹤,网页外观,网页结构;
DOM的分类
核心DOM:提供了同时操作HTML文档和XML文档的公共属性和方法;
HTML DOM :针对HTML文档提供的专用的属性方法;
XML DOM :针对XML文档提供的专用的属性和方法(就业讲);
CSS DOM :提供了操作CSS的属性和方法;
Event DOM :事件对象模型;如:onclick事件,onload事件 等;
HTML节点树(重点:3,节点的创建,追加和删除)
在DOM中,称为“节点”;
在HTML中,称为“标记”;
在JS中,称为“对象”;
例:如图,左边为源代码和右边为节点树
节点关系
根节点:一个HTML文档只有一个根,它就是HTML节点;
子节点:某一个节点的下级节点;
父节点:某一个节点的上级节点;
兄弟节点:两个子节点同属于一个父节点;
DOM节点类型
document文档节点:代表整个网页,不代表任何HTML标记,但它是HTML节点的父节点;
element元素节点:指任何HTML标记,每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点;
attribute属性节点:指HTML标记的属性;
text节点:是节点树的最底层节点;
核心DOM中公共的属性和方法
提示:核心DOM中查找节点(标记),都是从根节点开始的(<html>节点);
1,节点访问
nodeName :节点名称;
nodeValue :节点的值,只有文本节点才有值,元素节点没有值;nodeValue的值只能是“纯文本”,不能含有任何的HTML或CSS属性,而HTML DOM中的innerHTML包含HTML标记的所有内容,包括HTML标记等;
firstChild :最后一个子节点;
lastChild :最后一个子节点;
childNodes :子节点列表,是一个数组;
barentNode :父节点;
查找DOM节点(标记)
1,查找html节点
var node_html =document.firstChild;
2, 查找body节点
var node_body =node_html.lastChild;
3,查找table节点
var node_table =node_body.first
2,节点属性
3,节点的创建,追加和删除(重点)
1,节点的创建
var obj = createElement(tagName); 创建一个指定的HTML节点(标记);tagName:是指不带方括号的标记名;新节点创建后需加到某个父节点下;
2,节点的追加
parentNode.appendChild(childNode); 将创建的节点,追加到某个父节点下;
parentNode :代表父节点,父节点必须存在;
childNode :代表子节点;
3,节点的删除
parentNode.removeChild(childNode); 删除子节点;
parentNode :代表父节点,父节点必须存在;
childNode :代表子节点;
例: