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