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的更多相关文章

2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
JAVAScript中DOM与BOM的差异分析
JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...
关于JavaScript的DOM和BOM
本文探讨JavaScript的三大部分中的两个部分,DOM和BOM. DOM介绍 DOM,全称Document Object Model,即文档对象模型.它是W3C的一个标准,定义了一个对文档操作的 ...
JavaScript 之 DOM 与 BOM
DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值. 由于DOM的操作对象是文档(Document),所以dom和浏览器没有直接关系. BOM是浏览器对 ...
【JavaScript】DOM和BOM之我的理解
2018年12月17日一.我们能够对html文档和浏览器做的操作 (一)html文档增.删.改.可以在html中增加.删除.改动元素 (二)浏览器地址栏:输入.修改地址历史记录:前进.后退.跳 ...
Python学习-前台开发-JavaScript、Dom和jQuery
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...
Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
Web UI - Javascript之DOM Ready
最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...
静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...

随机推荐

Spring Aop（一）——Aop简介
转发地址:https://www.iteye.com/blog/elim-2394629 1 Aop简介 AOP的全称是Aspect Oriented Programming,翻译成中文是面向切面编程 ...
iOS-XMPP（转）
IM的实现原理在我最初学习编程的时候,曾经用JAVA实现了一个最简单版的IM通讯,即通过Socket建立两台电脑之间的连接,然后发送IO流来进行即时通讯,我们现在所使用的IM软件尽管看上去非常 ...
jenkins:执行远程shell脚本时，脚本没有生效
问题: jenkins远程部署一台机器时,jenkins构建显示成功,但是查看服务日志却没有真正执行的sh run.sh脚本,导致服务并没有启动解决: 只需要在命令最上方加上source /etc/ ...
Fabric 查看zookeeper和kafka
进入kafka容器: sudo docker exec -it kafka bash cd opt/kafka 查看Kafka自动创建的topic bin/kafka-tipiccs.sh --lis ...
vue首页组件切换
结构如下代码如下: <template> <div id="page"> <div style="width: 100%" cl ...
解决SpringMVC拦截静态资源的问题
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...
Linux 工作管理 (job control)
fg , bg 有时,命令需要很长的时间才能执行完成.对于这种情况,我们使用‘bg’命令可以将任务放在后台执行,而用‘fg’可以调到前台来使用. 我们可以通过‘&’在后台启动一个程序: fin ...
docker安装mongodb和redis
一.安装mongodb docker pull mongo docker run -p 27017:27017 -d --name mongodb01 mongo docker run -p 2701 ...
*#【Python】【基础知识】【模块】【random】【使用random创造一个随机数】
Random介绍: 输出随机数. 快照: #!/usr/bin/python # -*- coding: UTF-8 -*- import random #生成 10 到 20 之间的随机数 prin ...
把Javascript 对象转换为键值对连接符字符串的方法总结
307down votefavorite 93 Do you know a fast and simple way to encode a Javascript Object into a strin ...

web开发：javascript之dom与bom

web开发：javascript之dom与bom的更多相关文章

随机推荐

热门专题