JavaScript学习笔记（四）DOM&BOM

七. HTML文档树

1. HTML树

<!-- HTML -->
<html>

<head>
</head>

<body>
    <div id='div1'>
        <div id='div1-1'></div>
        <div id='div1-21'></div>
        <div id='div1-3'>
            <div id='div1-3-1'></div>
            <div id='div1-3-2'></div>
        </div>
    </div>
</body>

</html>

最上面的节点，叫做根节点
这种嵌套关系，就被叫做父子节点

八. DOM（Document Object Model）文档对象模型

1. DOM是什么

DOM就是一个文档树的对象
文档树对象的属性,包含了HTML，CSS的结构和内容

2. 节点的操作

创建节点：document.createElement
添加节点：element.appendChild
删除节点：element.removeChild
查找节点：document.getElementById、document.getElementsByClassName、document.querySelector、document.querySelectorAll

Example

<!-- HTML -->
<html>
    <head>
    </head>
    <body>
        <div id='div1'>
            <div id='div1-1'> div1-1</div>
            <div id='div1-2'> div1-2</div>
        </div>
    </body>
</html>

/* CSS */
* {
    margin: 0;
    padding: 0;
}

#div1 {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0, 122, 204, 0.7);
}

#div1-1, #div1-2, #div1-3 {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 122, 204);
}

2.1 修改某个节点的内容

①找到这个节点
②改变这个节点的内容

// JavaScript
//找到id为div1-1的这个节点，然后把它放到element这个变量里面
var element = document.getElementById('div1-1')
//修改innerText属性
element.innerText = '汪小黑'

document就是dom对象，整个页面的全部信息都在这个对象里面
得到的节点(element)是一个 DOM节点对象 ，这个节点的文本就存储在这个节点的 innerText属性 里面

2.2 删掉某个子节点

①找到要删除的子节点
②找到子节点节点的父节点
③删除子节点

// JavaScript
var childElement = document.getElementById('div1-2')
var ParentElement = document.getElementById('div1')
ParentElement.removeChild(childElement)

2.3 增加子节点

①找到要增加子节点的节点
②创建一个节点
③给节点增加子节点

// JavaScript
var parentElement = document.getElementById('div1')
var childElement = document.createElement('div')
parentElement.appendChild(childElement)

3. DOM事件

每个节点都可以监听发生在自己身上的事件
事件包括单击,双击，键盘，滚轮，鼠标移入,移出等等

3.1 流程

找到需要写DOM事件的节点
监听节点上的某个事件
写触发某个事件之后的逻辑

Example

点击div1-1，div1变黄

// JavaScript
var element = document.getElementById('div1-1')
element.onclick = function (e) {
    var parentEle = document.getElementById('div1')
    parentEle.style.backgroundColor = 'yellow'
}

Tips：每个节点的CSS，存储在这个节点的style中

九. BOM

1. BOM是什么

BOM（Browser Object Model），即浏览器对象模型
BOM核心对象是window
六大模块：

①document：文档对象
②frames：窗口中所有命名的框架
③history：当前页面历史记录
④location：当前页面地址信息
⑤navigator：浏览器相关信息
⑥screen：用户显示屏幕相关属性