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基本语法和注意事项脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...

随机推荐

Jmeter 逻辑控制器之交替控制器
马上国庆节了,没有安排新版本的上线任务,所以最近自学时间比较充裕,决定把Jmeter好好学习学习,并把学习过程分享到博客中,今天呢,学习交替控制器. 一.认识交替控制器如下,在线程组下面创建一个交替 ...
selenium3 web自动化测试框架五：数据驱动简介及基础使用
1.数据驱动概述相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为完全分离,这样的测试脚本设计模式称为数据驱动.简单的理解为数据的改变从而驱动自动化测试的执行,最终引起测试结果的改变.通过使 ...
ASP.NET 拼多多用户登录授权后使用code去换取access_token
一.拼多多开放平台由于本人刚毕业进公司实习遇到一些问题然后想通过博客来记录和分享给大家一起学习. 第一次写博客没什么经验不是写的很好请大家多多关照嘴下留情哈哈谢谢! 好了话不多说直接进入主 ...
Unstanding LSTM
1.RNNs 我们可以把RNNs看成一个普通网络做多次复制后叠加在一起组合起来,每一个网络都会把输出传递到下一个网络中. 把RNNs按时间步上展开,就得到了下图: 从RNNs链状结构可以容易理解到他是 ...
CSRF利用
使用burpsuite的csrf poc选项,可以生成HTML代码 json CSRF flash + 307跳转 https://github.com/sp1d3r/swf_json_csrf
CORS扫描工具
参数链接: https://github.com/chenjj/CORScanner 未发现Cors风险已发现Cors风险 py2遇到的坑: 提示https ssl告警 /usr/local/lib ...
appium(toast处理)
from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expec ...
TensorFlow.资料
1.ZC:看来要用 TensorFlow,基本逃不过 Python了... TensorFlow物体识别——通过机器学习搭建属于自己的物体识别库 - 迷途无归的博客 - CSDN博客.html(h ...
VS编译错误._CRT_SECURE_NO_WARNINGS、_WINSOCK_DEPRECATED_NO_WARNINGS
1.不记得原来的情况了,记得大概是这样: 低版本的 VC编译器使用 strcpy.sprintf 等它不会报错,但是高版本的 VS编译就会报错,大意是 strcpy.sprintf 等函数不安全 ...
Linux系统下GDB调试
GDB 一.gdb常用命令: 命令描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号选择栈帧 in ...

web开发：javascript之dom与bom

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

随机推荐

热门专题