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. 使用 CODING 进行 Spring Boot 项目的集成

    本文作者:CODING 用户 - 高文 持续集成 (Continuous integration) 是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可 ...

  2. Dynamics 365中的应用程序介绍

    本人微信和易信公众号:微软动态CRM专家罗勇 ,回复275或者20180630可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  3. [spring boot] Table 'yhm.hibernate_sequence' doesn't exist

    在使用该注解时:@GeneratedValue要注意的几点: @GeneratedValue注解的strategy属性提供四种值: -AUTO主键由程序控制, 是默认选项 ,不设置就是这个 -IDEN ...

  4. 5.6Python数据处理篇之Sympy系列(六)---矩阵的操作

    目录 目录 前言 (一)矩阵的创建-Matrix() 1.说明: 2.源代码: 3.输出: (二)常用的构造矩阵 1.说明: 2.源代码: 3.输出: (三)基本操作 1.说明: 2.源代码: 3.输 ...

  5. chrome总是提示“请停用开发者模式运行的扩展程序”

    方法1:通过组策略的扩展白名单.要下载一个组策略管理模板 1.开始 -> 运行 -> 输入gpedit.msc -> 回车确定打开计算机本地组策略编辑器(通过Win + R快捷键可以 ...

  6. SQLServer之创建存储过程

    创建存储过程注意事项 在 SQL Server. Azure SQL Database.Azure SQL 数据仓库和并行数据库中创建 Transact-SQL 或公共语言运行时 (CLR) 存储过程 ...

  7. sizeof和strlen()区别及用法

    //sizeof是以字节为单位计算变量或类型所占内存大小,它是属于C语言运算符系列:而strlen()是一个函数,是计算字符串长度(也是以字节为单位,但略有区别):比如: char array[] = ...

  8. Kafka设计解析(七)- Kafka Stream

    本文介绍了Kafka Stream的背景,如Kafka Stream是什么,什么是流式计算,以及为什么要有Kafka Stream.接着介绍了Kafka Stream的整体架构,并行模型,状态存储,以 ...

  9. How-to: Do Real-Time Log Analytics with Apache Kafka, Cloudera Search, and Hue

    Cloudera recently announced formal support for Apache Kafka. This simple use case illustrates how to ...

  10. SQL CREATE INDEX 语句

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...