这是我参与「第五届青训营」伴学笔记创作活动的第3天

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点： 上图中、、

等都是元素节点，即标签。

2. 文本节点: 向用户展示的内容，如

...

中的JavaScript、DOM、CSS等文本。

3. 属性节点: 元素属性，如标签的链接属性href="www.imooc.com"。

浏览器网页就是一个DOM树形结构；

更新：更新DOM节点；
遍历：遍历DOM节点；
删除：删除一个DOM节点；
添加：添加一个新的节点；

要操作一个DOM节点，就要获取这个节点；

获得DOM节点

<div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
</div>

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
//获取父节点下的子节点；
var children = father.children[index];//下标
// father.firstChild;   第一个
// father.lastChild;    最后一个

更新DOM节点

操作文本

//修改文本
id1.innerText = '123'
"123"
id1.innerText = '456'
"456"
//解析HTML文本标签
id1.innerHTML = '<strong>123</strong>'
"<strong>123</strong>"

操作css

id1.style.color = 'red'
"red"
id1.style.fontSize = '55px'//驼峰命名问题
"55px"
id1.style.padding = '20px'
"20px"

删除节点

步骤：先获取父节点；再通过父节点删除自己；

<div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
<script>
方法一：        
        var self = document.getElementById('p1');
        var father = p1.parentElement;
        father.removeChild(self);
方法二：直接写标签；
        document.getElementById('father');
        father.removechild(p1);
方法三：找索引//删除是一个动态的过程；
        father.removeChild(father.children[0])
        father.removeChild(father.children[1])
        father.removeChild(father.children[2])
</script>

注意：删除节点的视时候一定要注意，children是时刻在变化的！

插入节点

获得某个DOM节点后，如果节点为空，用innerHTML就可以直接增加一个元素；如果节点存在元素，则不可以，因为会覆盖；

append：

<p id="js">javascript</p>
    <div id="list">
        <p id="me">javasME</p>
        <p id="ee">javaEE</p>
        <p id="se">javaSE</p>
    </div>

    <script>
        var js = document.getElementById('js');//已存在
        var list = document.getElementById('list');
        list.appendChild(js);//追加到后面
    </script>

通过js创建新的标签实现插入；

var newP = document.createElement('p');//创建p标签
        newP.id = 'newP';
        newP.innerText = '456';
        list.appendChild(newP);
// 创建一个标签节点；(通过这个属性可以设置任意的值)
         var myScript = document.createElement('script');
         myScript.setAttribute('type','text/javascript');

插入到前面

语法：

要包含的节点.insertBefore(新节点，目标节点);
将新节点插入目标节点的前面;

<p id="js">javascript</p>
    <div id="list">
        <p id="me">javasME</p>
        <p id="ee">javaEE</p>
        <p id="se">javaSE</p>
    </div>

    <script>
        var ee = document.getElementById('ee');
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        list.insertBefore(js,ee);
   </script>

替换当前节点

<p id="js">javascript</p>
    <div id="list">
        <p id="me">javasME</p>
        <p id="ee">javaEE</p>
        <p id="se">javaSE</p>
    </div>

    <script>
        var ee = document.getElementById('ee');
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        list.replaceChild(js,ee);//替换子节点;
   </script>

操作BOM对象

BOM：浏览器对象模型；

window对象

window代表浏览器窗口；

window.alert(1)
undefined
window.innerHeight
459
window.innerWidth
766
window.innerHeight
343
window.outerHeight
829
window.outerWidth
778

Navigator

Navigator，封装了浏览器的信息；

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0"
navigator.platform
"Win32"
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"

screen

代表屏幕尺寸；

screen.width
1536
screen.height
864

location

location代表当前页面的URL信息；

//主机
host:
//指向位置
herf:
//协议
protocol:
//重新加载
reload:
//设置新的地址
location.assign('地址')

document

代表当前页面信息；

获取具体的文档树节点

<dl id="app">
        <dt>java</dt>
        <dd>javaSE</dd>
        <dd>javaEE</dd>
    </dl>
    <script>
       var dl = document.getElementById('app');
    </script>

获取cookie

document.cookie

history

代表浏览器的历史记录；

history.forword()//前进
history.back()//后退

青训营笔记day：JavaScript中的DOM对象和BOM对象