JavaScript 系列博客(七)
JavaScript 系列博客(七)
前言
本篇博客介绍页面节点概念、文档结构以及如何使用 js 操作文档节点还有事件 target 以及 BOM 操作。
节点
- dom与dom属性
// 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); // 添加
文档结构(element元素范围)
// 父级
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 // 自己
文档元素节点操作
// 操作步骤
// 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,可以接受返回值,就是被替换的元素
res = bodyreplaceChild(box, oldEle);
// true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
box.cloneNode()
事件对象target属性
// ev.target通过父级的事件对象,获取具体相应区域位置的子级元素
// 应用场景
// 1. 父级的子元素类型不同一,采用循环绑定不方便
// 2. 父级子元素较多或不确定
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
JavaScript 系列博客(七)的更多相关文章
- JavaScript 系列博客(六)
JavaScript 系列博客(六) 前言 本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性.设置标签的全局属性,以及事件的绑定与取消.js 盒模型与 js 动画. 对象使用的高级 对象的 ...
- JavaScript 系列博客(五)
JavaScript 系列博客(五) 前言 本篇博客学习 js 选择器来控制 css 和 html.使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容. js 选择器 在学习 ...
- JavaScript 系列博客(四)
JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScr ...
- JavaScript 系列博客(三)
JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...
- JavaScript 系列博客(二)
JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...
- JavaScript 系列博客(一)
JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...
- Django 系列博客(七)
Django 系列博客(七) 前言 本篇博客介绍 Django 中的视图层中的相关参数,HttpRequest 对象.HttpResponse 对象.JsonResponse,以及视图层的两种响应方式 ...
- JavaScript学习系列博客_1_JavaScript简介
这个系列博客主要用来记录本人学习JavaScript的笔记,从0开始,即使有些知识我也是知道的.但是会经常忘记,干脆就写成博客,没事的时候翻来看一看,留下一点学习的痕迹也好.可能写博客的水平暂时不太好 ...
- Django 系列博客(十四)
Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...
随机推荐
- ExtJS中listener方法和handler方法的区别
listener方法和handler方法的区别在文档中的说明的太玄乎了,看不懂 listeners监听能够对一个click Event事件添加任意多个的事件响应处理函数 而handler处理只能够通过 ...
- macOS 安装 ctags
macOS 安装 ctags macOS 自带一个 ctags,但是不支持 -R 参数,递归产生tags文件 $ ctags -R --exclude=.git --exclude=log * cta ...
- vmWare pro 14.1.1+ubuntu-desktop-amd64的总体安装流程
vmWare pro正常安装 下载后双击安装,按步骤走即可 创建虚拟机 设置虚拟机 window设置虚拟化技术 电脑重启后,弹出如下所示,选择 疑难解答->高级选项->UEFI固件设置-& ...
- js读取txt文件
$('#selectAreaFile').on('change',function(e){//用户区域的文件选择 var files=e.target.files; if ...
- 点击a标签的文字后页面的跳转
1.方法一 (1)js var html=""; html+="<a href=\"#\" onclick=\check('"+id+ ...
- [smf]smf论坛也很漂亮
smf论坛代码国内使用的比较少,可能是大家习惯了dz论坛的互动方式吧!但是,smf论坛系统不失为一款好的论坛系统,也是目前为数不多的开源代码.使用起来之后,你会体会到它强大的后台操作.(例如:插件的安 ...
- Android中弹出dialog后无法捕捉back键
一.需求 在Android开发过程中,弹出dialog后无法捕捉back键,点击back按键无响应. 二.解决方案 原因:弹出dialog后,activity失去焦点,dialog获得当前焦点. 解决 ...
- CentOS7 openssh7.9p1安装
先安装telnet,以防安装ssh出现问题,无法远程登录设备. 最新版openssh下载地址:http://www.openssh.com/ftp.html 一.安装telnet和xinetd: 1. ...
- [转]Examining Open vSwitch Traffic Patterns
In this post, I want to provide some additional insight on how the use of Open vSwitch (OVS) affects ...
- IDEA项目上传到github
IDEA项目上传到github 保证下载了Git插件 往后余生,唯独有你 简书作者:达叔小生 90后帅气小伙,良好的开发习惯:独立思考的能力:主动并且善于沟通 简书博客: https://www.ji ...