JavaScript 系列博客（七）

时间：2021-11-25 19:29:12

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

相关文章