2 DOM
2.1 DOM介绍
◆ “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，
它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”
◆ HTML DOM 是关于如何增,删,改,查 HTML 元素的标准。
◆ HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
image.png
2.2 节点
◆ 节点树就是由一个个节点组成
◆ 父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
◆ 父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
nextElementSibling; // 下一个兄弟元素
previousElementSibling; // 上一个兄弟元素
image.png
2.3 如何获取节点(查询)
◆ getElementById()
// 使用id名获得元素
◆ getElementsByTagName()
// 使用标签名获得数组,用数组[0] 得到元素
◆ getElementsByClassName()
// 使用类名获得数组,用数组[0] 得到元素
◆ querySelectorAll("div>.yxh"); // 得到div下所有.yxh 的元素.
◆ querySelector("div>.yxh"); // 得到div下第一个.yxh元素.
// querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）；
在都没有满足条件的元素情况下：querySelector返回__Null__，而querySelectorAll返回空的数组__[]__；
2.4 节点的分类nodeType
◆ nodeType==1 为元素节点
◆ nodeType==2 为属性节点
◆ nodeType==3 位文本节点 // 换行也是文本节点
◆ nodeName // 返回节点的名字
◆ nodeValue // 返回节点的值
Object.nodetype // 使用方法
2.5 增加获取节点
◆ 创造插入节点
createElement() ; // 创建元素节点
createTextNode(); // 创建文本节点
appendChild(); // 将新元素作为父元素的最后一个子元素进行添加。
insertBefore(newNote,childElementNode); // 插入新元素
◆ Attribute 属性节点
getAttributeNode(att); // 获得属性节点 方法 1
attributes["title"]; // 获得属性节点 方法 2
createAttribute(); // 创建属性
setAttributeNode(att); // 设置属性节点
◆ example :
var p=document.createElement("p"); // 创建元素节点
var txt = document.createTextNode("hello world"); // 创建文本节点
var att = document.createAttribute("title"); // 创建属性 title
att.value = "我是新增加的属性节点" // 设置 title 属性值
p.appendChild(txt); // 增加子节点
p.setAttributeNode(att); // 设置属性节点
document.body.appendChild(p); // 增加子节点
◆ parentNode.insertBefore(newNode,childElementNode)
// 新元素可以插入想要的位置.
2.6 删除节点
◆ parentNode.remove(); // 删除父节点
◆ parentNode.removeChild(childNode); // 删除子节点
2.7 修改元素节点的内容
◆ innerHTML // 设置或返回表格行的开始和结束标签之间的 HTML。(文本以及标签)
◆ object.style.color=”pink” // 修改css样式
◆ object.style.cssText ="width:200px;height:200px;background-color:red" // 修改css样式
2.8 修改节点(替换节点)
◆ parentNode.replaceChild(newNode,oldNode);
example:
var newElement = document.createElement("img"); // 创建新的img元素
newElement.style.cssText="width:100px;height:100px;background-color:gold"; // 设置新元素img的样式
newElement.src="images/logo.gif"; // 加载新元素img的图片
box.replaceChild(newElement,p); // 替换原来的 p 元素
2.9 事件(event)
JavaScript与HTML之间的交互式通过事件实现的
onclick // 点击事件
onfocus // 获得焦点事件
onblur // 元素数去焦点
onmouseover // 鼠标移到某元素之上
onmouseout // 鼠标从某元素移开
// 有事件一定有对应一个处理结果，用函数表示
box.onclick=function(){
.......................syntax
.......................syntax
};
image.png
