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 系列博客(七)的更多相关文章

  1. JavaScript 系列博客(六)

    JavaScript 系列博客(六) 前言 本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性.设置标签的全局属性,以及事件的绑定与取消.js 盒模型与 js 动画. 对象使用的高级 对象的 ...

  2. JavaScript 系列博客(五)

    JavaScript 系列博客(五) 前言 本篇博客学习 js 选择器来控制 css 和 html.使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容. js 选择器 在学习 ...

  3. JavaScript 系列博客(四)

    JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScr ...

  4. JavaScript 系列博客(三)

    JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...

  5. JavaScript 系列博客(二)

    JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...

  6. JavaScript 系列博客(一)

    JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...

  7. Django 系列博客(七)

    Django 系列博客(七) 前言 本篇博客介绍 Django 中的视图层中的相关参数,HttpRequest 对象.HttpResponse 对象.JsonResponse,以及视图层的两种响应方式 ...

  8. JavaScript学习系列博客_1_JavaScript简介

    这个系列博客主要用来记录本人学习JavaScript的笔记,从0开始,即使有些知识我也是知道的.但是会经常忘记,干脆就写成博客,没事的时候翻来看一看,留下一点学习的痕迹也好.可能写博客的水平暂时不太好 ...

  9. Django 系列博客(十四)

    Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...

随机推荐

  1. vue学习-自动行合并的table

    测试的效果 测试的html源码截图 v-table在tableGroup.js中定义,以下就render方法,行的所有单元格都在tableGrouper.js中处理 render:function(h ...

  2. pm2模块编写入门

    PM2 模块 PM2模块是通过PM2来安装和管理,代码可以托管在NPM中.任何人都可以创建和发布一个PM2模块,可以是日志模块.http代理模块.负载均衡模块.DNS服务器模块或任何类型的实用程序. ...

  3. Monkey测试结果分析

    Monkey测试结果分析 什么是monkey Monkey 测试是 Android 自动化测试的手段之一,它通过模拟用户的按键输入.触摸屏输入等,测试设备多长时间出现异常.Monkey 是一个命令行工 ...

  4. 2.0vue导出excel

    如果没有插件导入 import FileSaver from 'file-saver' import XLSX from 'xlsx'导入依赖 import FileSaver from 'file- ...

  5. EF学习笔记(十一):实施继承

    学习总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上篇链接:EF学习笔记(十) 处理并发 本篇原文链接:Implementing Inheritance 面向对象的世界里, ...

  6. spak数据倾斜解决方案

    数据倾斜解决方案 数据倾斜的解决,跟之前讲解的性能调优,有一点异曲同工之妙. 性能调优中最有效最直接最简单的方式就是加资源加并行度,并注意RDD架构(复用同一个RDD,加上cache缓存).相对于前面 ...

  7. Python爬取淘宝店铺和评论

    1 安装开发需要的一些库 (1) 安装mysql 的驱动:在Windows上按win+r输入cmd打开命令行,输入命令pip install pymysql,回车即可. (2) 安装自动化测试的驱动s ...

  8. 抄一篇maven的备忘

    标注下来源:http://www.trinea.cn/android/maven/ 由浅入深,主要介绍maven的用途.核心概念(Pom.Repositories.Artifact.Build Lif ...

  9. FPGA中分数分频器的实现代码

    module clkFracDiv( output reg clkout, input rstn, input refclk, :] fenzi, :] fenmu ); :] rstn_syn; : ...

  10. Android-引导用户指纹录入

    根据不同的手机,跳转到指纹录入界面,如果没有检测到手机的品牌,就提醒用户手动去指纹录入: 首先描述手机信息检测对象,PhoneInfoCheck.java: package com.esandinfo ...