day56

DOM

一、JS中标签关系

<div class="sup">
    <div class="sub1"></div>
    <div class="sub2"></div>
    <div class="sub3"></div>
</div>

<script>
    var sub2 = document.querySelector('.sub2');
    // 父级标签
    console.log(sub2.parentElement);
    // 上一个标签
    console.log(sub2.previousElementSibling);
    // 下一个标签
    console.log(sub2.nextElementSibling);

    var sup = document.querySelector('.sup');
    // 所有子标签
    console.log(sup.children);
    // 第一个子标签
    console.log(sup.firstElementChild);
    // 最后一个子标签
    console.log(sup.lastElementChild);
</script>

二、JS操作页面标签

// 创建一个div标签
var div = document.createElement("div");
// 添加到body末尾，返回自身
div = body.appendChild(div);
// 插入到body中box标签前，返回自身
div = body.insertBefore(div, box);
// 替换掉body中box标签，返回box
box = body.replaceChild(div, box);
// 在body中移除div，返回自身
div = body.removeChild(div);

三、JS操作DOM一般步骤

1、创建标签

2、设置标签样式文本

3、添加到页面指定位置

BOM

1、窗口操作 open

// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');

2、历史记录 history

// 历史后退
history.back();
// 历史前进
history.forward()

3、导航器 navigator

// 拥有浏览器信息的字符串
navigator.userAgent;

4、地址信息 location

// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search