1.节点

dom与bom属

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

节点分类

// 节点分类:6个
// document | doctype文本类型 | element元素 | text文本 | attr属性 | comment注释

节点常规操作

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);// 添加

2.文档结构(element元素范围)

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

3.文档元素节点操作

// 操作步骤
// 1. 创造div(元素节点)
// 2. 设置div属性(单一css | css 类名 | 文本 | 子标签 | 事件 | 。。。)
// 3. 添加到(文档结构中)指定位置
// 传经:只能由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元素,可以接受返回值,就是被替换的元素
var res = body.removeChild(div);
// 将body中oldEle元素替换为box,可以接受返回值,就是被替换的元素
res = bodyreplaceChild(box, oldEle);
// true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
box.cloneNode()

4.事件对象target属性

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

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

5.BOM操作

// BOM:Browser Object Model,提供用户浏览器加护的标准接口
// BOM的顶级对象为window对象,页面中出现的其实所有对象都是window的子对象
// 重要子对象
// document | history | location | navigator | screen
// location => url 信息
console.log(location);
// 域名:端口号
console.log(location.host);
//域名
console.log(location.hostname);
// 端口号
console.log(location.port);
// 查询信息
console.log(location.search);
// history
history.back() | history.forward() | history.go(-num | num)
// 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

第六十九天 dom与bom的更多相关文章

  1. 孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2

    孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步 ...

  2. C#高级编程六十九天----DLR简介 .在.NET中使用DLR(转载) 我也来说说Dynamic

    DLR 一.近年来,在TIOBE公司每个月发布的编程语言排行榜中,C#总是能挤进前十名,而在最近十年来,C#总体上呈现上升的趋势.C#能取得这样的成绩,有很多因素,其中它在语言特性上的锐意进取让人印象 ...

  3. 第二百六十九天 how can I 坚持

    什么是明事理,搞不懂啊,好烦. 有点像我妈. 为什么突然就想买房了呢,为什么?年龄到了,考虑的东西就不一样了. 哎,不要想太多,睡觉.

  4. python第一百六十九天,第十九周作业

    FIRSTCRM 学员管理开发需求: 1.分讲师\学员\课程顾问角色, 2.学员可以属于多个班级,学员成绩按课程分别统计 3.每个班级至少包含一个或多个讲师 4.一个学员要有状态转化的过程 ,比如未报 ...

  5. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  6. OCM_第十九天课程:Section9 —》Data Guard _ DATA GUARD 原理/DATA GUARD 应用/DATA GUARD 搭建

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  7. 孤荷凌寒自学python第四十九天继续研究跨不同类型数据库的通用数据表操作函数

    孤荷凌寒自学python第四十九天继续研究跨不同类型数据库的通用数据表操作函数 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天继续建构自感觉用起来顺手些的自定义模块和类的代码. 不同类型 ...

  8. 孤荷凌寒自学python第三十九天python 的线程锁Lock

    孤荷凌寒自学python第三十九天python的线程锁Lock (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 当多个线程同时操作一个文件等需要同时操作某一对象的情况发生时,很有可能发生冲突, ...

  9. 前端学习 之 JavaScript DOM 与 BOM

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

随机推荐

  1. 博弈论进阶之Multi-SG

    Multi-Nim 从最简单的Nim模型开始 它的定义是这样的 有\(n\)堆石子,两个人可以从任意一堆石子中拿任意多个石子(不能不拿)或把一堆数量不少于\(2\)石子分为两堆不为空的石子,没法拿的人 ...

  2. 深海中的STL—nth_element

    如果让你求区间第\(k\)大,你会怎么做呢? 主席树?确实是个不错的选择(不过像我这种垃圾还是乖乖打暴力吧) 在c++的stl库中,提供了nth_element这样一个函数 它的用法是nth_elem ...

  3. SuperMap iClient 如何使用 WMTS 地图服务(转载)

    原文链接: WMTS服务初步理解与读取 https://blog.csdn.net/supermapsupport/article/details/76806670 SuperMap iClient ...

  4. WPF:间接支持虚拟化的ListBox

    /// <summary> /// 间接实现了虚拟化的ListBox /// 子项必须实现IVisible接口 /// 你可以在IsVisible发生改变时实现一系列自定义动作 /// 比 ...

  5. 安卓开发:UI组件-图片控件ImageView(使用Glide)和ScrollView

    2.7ImageView 2.7.1插入本地图片 一个图片控件,可以用来显示本地和网络图片. 在首页添加按钮ImageView,指向新页面(步骤与前同,不再详写). activity_image_vi ...

  6. Kasaraju算法--强连通图遍历及其python实现

    在理解有向图和强连通分量前必须理解与其对应的两个概念,连通图(无向图)和连通分量. 连通图的定义是:如果一个图中的任何一个节点可以到达其他节点,那么它就是连通的. 例如以下图形: 这是最简单的一个连通 ...

  7. axios与ajax区别

    1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...

  8. 【公众号系列】两分钟学会SAP F1技巧

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[公众号系列]两分钟学会SAP F1技巧   写 ...

  9. Cmder--Windows下代替原生的cmd命令行工具

    Cmder是Windows下的命令行工具,用来代替Windows自带的cmd 官网:http://cmder.net/ 这里下载Full版本 https://github.com/cmderdev/c ...

  10. 小小白搭建nextcloud云盘

    我是一名linux的小小白,今天就利用自己的所学搭建属于自己的云盘——nextcloud. 本人学生狗,普通的云盘也要几十块钱,既然我们只是拿来搭建巩固自己知识并不做为生产力,我们就用VMware W ...