---DOM篇

时间 2019-11-16

标签 dom 栏目 HTML 繁體版

原文原文链接

DOM

Q：什么是DOM？
A:(Document Object Model,文档对象模型,JS能够经过DOM来操做HTML结构；在DOM中，全部事物都是节点javascript

DOM树

DOM将HTML理解为树形结构，基本HTML转换为DOM视角以下(已省略部份内容)html

<html>
    <head>
        <title>"文档标题"</title>
    </head>
    <body>
        <a href="#">个人连接</a>
        <h1>个人标题</h1>
    </body>
</html>
复制代码

DOM节点类型

DOM节点类型:node_type
   Element节点:1
   Text节点:3
   Document节点:9
   DocumentFragment节点:11
复制代码

原生JS操做DOM

新增DOM

var title = document.createElement('h2');
var list = document.createTextNode('this is a test');
//将新建立的节点挂在DOM树上
title.appendChild(list);
document.body.appendChild(title);
复制代码

查找DOM

var id = document.getElementById("test");   //查找单个元素

var cls = document.getElementsByClassName("test");   //返回多个元素

var tag = document.getElementsByTagName("p");   //返回多个元素

//如下两种方式传入的是CSS选择器
var q1 = document.querySelector("#id"); //返回查询到的第一个元素

var q2 = document.querySelectorAll("li");   //返回多个元素
复制代码

这里简单说下查询多个元素时返回的HTML Collection对象，它会随着DOM的改变而动态变化；内部数据是按照获取顺序排列的；能够使用[index]来获取对应内容，length属性来获取长度(只读)java

删除元素

var h1 = document.createElement('h1')
document.body.append(h1)

var h1 = documentSelectorAll('h1')
document.body.removeChild(h1)
h1.parentNode.removeChild(h1)
复制代码

DOM对象的属性和方法

r = document.getElementById('aa');

r.textContent   //"Hello World!" 文本内容
r.className     //class属性
r.classList     //返回一个列表，可经过add等方法操做
 r.classList.add('xxx');
 r.classList.remove('xxx');
复制代码