JavaScript - 2.Dom<增删改查> + 事件

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