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);

// historyhistory.back() | history.forward() | history.go(-num | num)

// navigatorconsole.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

原文出处：https://www.cnblogs.com/zuanzuan/p/10199418.html