JavaScript学习笔记（2）

DOM模型

---

DOM模型全称 Document Object Model 文档对象模型

将页面文档中的标签、属性、文本转换为对象来进行管理

Document对象

1. Document管理了所有的HTML文档的内容
2. Document是采取树状结构的进行对象管理，有明显的层级关系
3. 我们可以通过Document访问所有的对象化标签

HTML标签的对象化：

class DOM{
	private String id; //id属性
	private String tagName; //标签名
	private Dom parentNode; //父节点
	private List<Dom> children; //子节点
	private String innerHTML; //标签起始与结束中间的内容
}

通过Document查找文档内标签的方法

方法	描述
getElementById()	返回第一个id符合的标签（只能返回一个）
getElementsByClassName()	返回指定类的对象集合
getElementsByName()	返回带有指定名称的对象集合
getElementsByTagName()	返回带有指定标签名的对象集合

获取的对象集合是按文档中标签从上到下的顺序排列的

获取文档内标签对象必须在页面加载完成之后进行（在头部<script>标签的window.onload()方法中或者在函数内，如果以单一一条语句的形式存在于<script>中则无法正常获取标签对象。

示例1：通过文本输入框获取并验证用户名合法性

// 需求：当用户点击校验按钮获取输入框内容然后校验其合法性
// 校验规则：字母、数字、下划线组成，长度5~12位

function onclick_function2(){
    console.log("这是一个静态注册的onclick事件");
    let obj_username = document.getElementById("username");
    let username_text = obj_username.value;
    let patt = /^\w{5,12}$/;
    if(patt.test(username_text)){
        console.log("用户名合法！");
    }
    else{
        alert("用户名不合法！");
    }
}

Tips: 更多JavaScript中的正则表达式学习资料请参考 菜鸟教程 | JavaScript 正则表达式

示例2：在页面上插入提示信息

let obj_information = document.getElementById("information_waring");
//通过提示文字
obj_information.innerHTML = "用户名非法!";
//通过提示图片
obj_information.innerHTML = "<img src=\"./img/wrong.png\" width=\"14px\" height=\"14px\">"; //注意字符转义

示例3：实现复选框的“全选”与“反选”

复选框对象的checked属性表示其选中状态

let hobbies = document.getElementsByName("hobby");

//全选
function checkAll(){
    for (const t of hobbies) {
        t.checked = true;
    }
}

//全不选
function checkNone(){
    for (const t of hobbies) {
        t.checked = false;
    }
}

//反选
function checkReverse(){
    for (const t of hobbies) {
        t.checked = !t.checked;
    }
}

标签对象的常用属性和方法

注：标签对象也别称为节点 (Document文档树的节点)

方法：

通过具体的元素节点调用（区别于通过Document对象调用）

方法	作用
getElementsByTagNode()	获取当前指定节点的子节点中拥有指定标签名的节点对象（有点类似于css中的选择器）
appendChild(oChildNode)	可以为指定节点添加一个子节点 oChildNode

属性：

属性	作用
childNodes	获取当前节点的所有子节点
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
parentNode	获取当前节点的父节点
nextSibling	获取当前节点的下一个节点（兄弟节点）
previousSibling	获取当前节点的上一个节点（兄弟节点）
className	用于获取或设置标签的class属性
innerHTML	用于获取或设置标签对象的起始标签与结束标签中的内容
innerText	用于获取或设置标签对象的起始标签与结束标签中的文本

注：使用childNodes属性时要需要注意的是标签之间的分隔符（空白符、换行符）都属于子节点

示例1：通过 appendChild 在 body 中添加标签

let obj_div = document.createElement("div");
obj_div.innerHTML = "这是一个通过appendChild方法添加的一个div标签";
document.body.appendChild(obj_div);