web开发：javascript之dom与bom

一、节点认知

二、文档结构

三、文档节点操作

四、事件target

五、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>

巴特西

web开发：javascript之dom与bom

最新文章

热门文章