web开发：javascript之dom与bom

本文目录：

一、节点认知

- dom与dom属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>节点</title>
    <style></style>
</head>
<!---->
<body>
<div class="sup" abc="123">
    <div class="sub">sub</div>
    <div class="sub">sub</div>
    <div class="sub">sub</div>
</div>
<div class="sup">
    <div class="sub">sub</div>
    <div class="sub">sub</div>
    <div class="sub">sub</div>
</div>
</body>
<script>
    // DOM: 文档对象模型 => 提高给用户操作document obj的标准接口
    // DOM树: 以document为根, 树状展开所有子节点
    var body = document.querySelector('body');
    console.log([body, document]);

    // 节点分类: 6个
    // document | doctype | element | text | attr | comment
    // 节点名(纯大写)
    console.log(body.nodeName)
    // 节点类型(标识节点的分类)
    console.log(body.nodeType);


    // 属性操作
    var sup1 = document.querySelector('.sup');
    console.log(sup1.getAttribute('abc'));

    // 操作属性节点
    var info_node = document.createAttribute("info");
    console.log(info_node.nodeName);
    console.log(info_node.nodeType);
    info_node.value = '123';
    console.log(info_node.nodeValue);
    sup1.setAttributeNode(info_node);


</script>
</html>

```js
// DOM: 文档对象模型 => 提高给用户操作document obj的标准接口
// DOM树: 以document为根, 树状展开所有子节点
```

- 节点分类

- 节点常规操作

```js
var info_node = document.createAttribute("info"); // 创建
console.log(info_node.nodeName);
console.log(info_node.nodeType);
info_node.value = '123'; // 设置
console.log(info_node.nodeValue);
sup1.setAttributeNode(info_node); // 添加
```

二、文档结构

```js
// 父级
console.log(sup.parentElement)
// 子级们
console.log(sup.children);
// 第一个子级
console.log(sup.firstElementChild);
// 最后一个子级
console.log(sup.lastElementChild);
// 上兄弟
console.log(sup.previousElementSibling);
// 下兄弟
console.log(sup.nextElementSibling);
// 注: 文档结构操作是可以采用连.语法
// sup.children[0].parentElement // 自己
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档结构</title>
</head>
<body>
    <div class="box"></div>
    <div class="sup">
        <div class="sub1"></div>
        <div class="sub2"></div>
    </div>
    <div class="wrap"></div>
</body>
<script>
    var sup = document.querySelector('.sup');

    // 父级
    console.log(sup.parentNode);  // 节点
    console.log(sup.parentElement);  // 元素
    console.log(sup.parentNode.parentNode.parentNode); // #document
    console.log(sup.parentElement.parentElement); // html

    // 子级们
    console.log(sup.children);
    // 第一个子级
    console.log(sup.firstElementChild);
    // 最后一个子级
    console.log(sup.lastElementChild);
    // 上兄弟
    console.log(sup.previousElementSibling);
    // 下兄弟
    console.log(sup.nextElementSibling);

</script>
</html>

三、文档节点操作

```js
// 操作步骤
// 1. 创建div(元素节点)
// 2. 设置div属性(单一css | css类名 | 文本 | 子标签 | 事件 | ...)
// 3. 添加到(文档结构中)指定位置
```

```js
// 创建:只能由document调用
var box = document.createElement('div');
// 在body元素的最后追加一个子元素
body.appendChild(box);
// 在body元素oldEle之前插入一个子元素
body.insertBefore(box, oldEle);
// 从body中删除box元素,可以接受返回值,就是删除的元素
var res = body.removeChild(div);
// 将body中oldEle元素替换为box,可以接受返回值,就是被替换的元素
res = bodyreplaceChild(box, oldEle);
// true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
box.cloneNode()
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档节点</title>
    <style>
        .show {
            width: 500px;
            height: 500px;
            border: 3px solid black;
            margin: 0 auto;
        }
        .sup {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: orange;
            float: left;
        }
        .sub {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: deeppink;
            position: relative;
            top: 40px;
            left: 40px;
        }
        .ele {
            width: 100px;
            height: 100px;
            border-radius: 20% / 50%;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="show">
        <!--如何动态创建.sup>.sub结构-->
        <!--<div class="sup">-->
            <!--<div class="sub"></div>-->
        <!--</div>-->
    </div>
</body>
<script>
    // 产生随机数
    function randomNum(m, n) {
        return parseInt(Math.random() * (n - m + 1)) + m;
    }
    // 随机颜色
    function randomColor() {
        var color = "";
        var r = randomNum(0, 255);
        var g = randomNum(0, 255);
        var b = randomNum(0, 255);
        color = "rgb(" + r + ", " + g + ", " + b + ")";
        return color;
    }


    var show = document.querySelector('.show');
    // 1. 创建div(元素节点)
    // 2. 设置div属性(单一css | css类名 | 文本 | 子标签 | 事件 | ...)
    // 3. 添加到(文档结构中)指定位置

    /*
    // 注: 所有创建节点的操作只能由document来完成
    var sup = document.createElement('div');  // 创建div一定要写div, 因为是节点名(元素节点名就是标签名)
    sup.className = 'sup';
    show.appendChild(sup);

    sup = document.createElement('div');
    sup.className = 'sup';
    sup.style.backgroundColor = randomColor();
    show.insertBefore(sup, show.firstElementChild);

    sup = document.createElement('div');
    sup.className = 'sup';
    sup.style.backgroundColor = randomColor();
    show.insertBefore(sup, show.firstElementChild);
    */
</script>
<script>
    // var body = document.querySelector('body');
    // // true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
    // var cl_body = body.cloneNode(true);
    // console.log(cl_body);

    setInterval(function () {
        let sup = document.createElement('div');
        sup.className = 'sup';
        sup.style.backgroundColor = randomColor();


        let sub = document.createElement('div');
        sub.className = 'sub';
        sub.style.backgroundColor = randomColor();

        // sub属于sup, 添加到sup中
        // box.appendChild(ele); 将ele添加到box中最后位置
        sup.appendChild(sub);

        // 第一次添加到最后, 除此以外都添加到最前
        if (show.children.length == 0) {
            // 将sup添加到show最后
            show.appendChild(sup);
        } else {
            // 将sup添加到show第一个子级的前名(最前)
            show.insertBefore(sup, show.firstElementChild);
        }


        // 删除操作: 子级个数>25,将最后一个删除
        if (show.children.length > 25) {
            // 通过父级删除最后一个子级
            show.removeChild(show.lastElementChild);
        }

        // 将最中间的元素替换掉 25个满了, 替换第13个
        if (show.children.length == 25) {
            let div = document.createElement('div');
            div.className = 'ele';
            // 用div替换掉show中的索引为12的子元素
            let re_box = show.replaceChild(div, show.children[12]);
            // console.log(re_box.style.backgroundColor);
            show.replaceChild(re_box, show.children[13]);
        }

    }, 1000)
</script>
</html>

四、事件target

```js
// ev.target通过父级的事件对象,获取具体相应区域位置的子级元素

// 应用场景
// 1. 父级的子元素类型不同一,采用循环绑定不方便
// 2. 父级子元素较多或不确定
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件target</title>
    <style>
        ul {
            background: #333;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .active {
            color: orange;
            /*background: yellow;*/
        }
    </style>
</head>
<body>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
</ul>
<a href="./05_BOM操作.html">05_BOM操作.html</a>
</body>
<script>
    let lis = document.querySelectorAll('li');
    let r_num = parseInt(Math.random() * 4);
    lis[r_num].className = 'active';

    // 需求: 单击到ul上, 一定点击到了某个li, 如何确定点击的是否为active
    /*
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            if (this.className == 'active') {
                console.log("点击到了")
            } else  {
                console.log("没有点击到了")
            }
        }
    }
    */
    let ul = document.querySelector('ul');
    ul.onclick = function (ev) {
        // ev.target通过父级的事件对象,获取具体相应区域位置的子级元素
        console.log(ev.target);
        if (ev.target.className == 'active') {
            console.log("点击到了")
        } else  {
            console.log("没有点击到了")
        }
    }
    // 应用场景
    // 1. 父级的子元素类型不同一,采用循环绑定不方便
    // 2. 父级子元素较多或不确定
</script>
</html>

五、BOM操作

```js
// BOM: Browser Object Model, 提供用户与浏览器交互的标准接口
// BOM的顶级对象为window对象, 页面中出现的其实所有对象都是window的子对象
// 重要的子对象
// document | history | location | navigator | screen
```

```js
// location => url信息
console.log(location);
// 域名:端口号
console.log(location.host);
// 域名
console.log(location.hostname);
// 端口号
console.log(location.port);
// 查询信息
console.log(location.search);
```

```js
// history
history.back() | history.forward() | history.go(-num | num)
```

```js
// navigator
console.log(navigator.userAgent)
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BOM操作</title>
</head>
<body>
<a href="./04_事件target.html">04_事件target.html</a>
<button id="bn1">上一页</button>
<button id="bn2">下一页</button>

<button id="bn3">上两页</button>
<button id="bn4">下两页</button>

<!--非事件绑定, 为普通方法调用-->
<button onclick="fn(10)">验证</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script>
    function fn(a, b) {
        console.log(a, b)
    }
</script>
<script>
    // BOM: Browser Object Model, 提供用户与浏览器交互的标准接口

    // BOM的顶级对象为window对象, 页面中出现的其实所有对象都是window的子对象

    // 重要的子对象
    // document | history | location | navigator | screen

    // 注: window有众多自身属性与方法, 在使用这些属性与方法是,可以省略window
    console.log(window.innerWidth);
    console.log(innerWidth);

    // 创建一个空页面
    // window.open();
    // open();
    // open('','','width=600,height=600')
    // open('https://www.baidu.com', '_self')  // 默认_blank

</script>
<script>
    // location => url信息
    console.log(location);
    // 域名:端口号
    console.log(location.host);
    // 域名
    console.log(location.hostname);
    // 端口号
    console.log(location.port);
    // 查询信息
    console.log(location.search);
</script>
<script>
    // history
    // 历史纪录的长度(压栈到历史纪录的网页个数)
    console.log(history.length);

    bn1.onclick = function () {
        history.back()
    }
    bn2.onclick = function () {
        history.forward()
    }
    bn3.onclick = function () {
        history.go(-2)
    }
    bn4.onclick = function () {
        history.go(2)
    }
</script>
<script>
    // navigator
    // 返回浏览器用于 HTTP 请求的用户代理头的值
    console.log(navigator.userAgent)
    // Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
</script>
<script>
    // screen
    console.log(screen.availWidth);
    console.log(screen.width);

    console.log(screen.availHeight);
    console.log(screen.height);

    console.log(window.innerHeight);
    console.log(window.innerWidth);
</script>
</html>

posted @ 2019-01-15 18:38 仗剑煮大虾阅读(202) 评论(0) 编辑收藏举报

刷新页面返回顶部

仗剑煮大虾

大丈夫生居天地之間，豈能不食大蝦