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. 小tips:node起一个简单服务,打开本地项目或文件浏览

    1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...

  2. 转:从输入url到显示网页发生了什么

    在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由高到低 ...

  3. Vs2017 xaramin mac build agent部署后记

                    换了四种黑苹果,最终成功了                 步骤: 1.升级vs2017, 2.安装XCODE 8.3 3.安装vs2017 for mac 企业版 4 ...

  4. Redis保证事务一致性,以及常用的数据结构

    reids命令可以参考中文官网:http://redis.cn/commands.html 关于reids的使用,可以封装到工具类进行调用: Redis的工具类:JedisAdapter 除了数据结构 ...

  5. (办公)SpringBoot与mybatisGenerator自动生成.

    20181206-自动生成,少写一点代码. (以下的内容主要参考csdn上的<[完美]SpringBoot+Mybatis-Generator自动生成>这篇文章,还有简书上的mbatis- ...

  6. cmd的变量总结

    转自:https://blog.csdn.net/flyoutsan/article/details/52811095 cmd变量通过set设置变量,通过可以使用set /?查看有关变量的帮助文档. ...

  7. 浅谈TCP IP协议栈(四)IP协议解析

    通过之前的网络层基础知识,IP地址以及路由器的简介,大家应该对于TCP/IP有一个大致的了解,在脑海里应该对于网络的几个基础概念有个大概的了解,简单点说整个协议栈就是在做一件事,规定网络报文(网络传输 ...

  8. Type '' cannot conform to protocol '' because it has requirements that cannot be satisfied

    我有一个Objective-C协议,我试图在Swift类中实现.例如: @class AnObjcClass; @protocol ObjcProtocol <NSObject> - (v ...

  9. 【eclipse】mybatis配置文件创建与mapper接口文件创建

    什么是mybatis: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射. mybatis配置文件: <?xml version="1.0" ...

  10. 多线程——multiprocess

    先看个误打误撞的写的代码 import os import time import multiprocessing def func(): print('我是func函数1','现在的father进程 ...