二.Node

前言

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)

• 整个文档是一个文档节点(document 对象)
• 每个 HTML 元素是元素节点(element 对象)
• HTML 元素内的文本是文本节点(text 对象)
• 每个 HTML 属性是属性节点(attribute 对象)
• 注释是注释节点(comment 对象)

1.属性

• attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
• property 是 dom 元素在 js 中作为对象拥有的属性。
• 对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的
• 但是对于自定义的属性来说，他们是不同步的.(自定义属性不会自动添加到 property)

1.自身属性

• attributes - 节点（元素）的属性节点
• nodeType – 节点类型
• nodeValue – 节点值
• nodeName – 节点名称
• innerHTML - 节点的文本值（显示在页面上的内容）

2.导航属性

• parentNode - 节点（元素）的父节点 (推荐多用)
• firstChild – 节点下第一个子元素
• lastChild – 节点下最后一个子元素
• childNodes - 节点（元素）的子节点

2.查找方法

1.全局查找标签

• 使用 document.getElementById() 方法
• 使用 document.getElementsByTagName() 方法
• 使用 document.getElementsByClassName() 方法
• 使用 document.getElementsByName() 方法

2.标签内查找标签

• element.getElementsByTagName()
• element.getElementsByClassName()

3.常见操作

2.1 获取元素

document.querySelector("css选择器") // 只选择符合的第一个，静态获取，后添加的元素不会加进来
document.querySelectorAll("css选择器") // 取得 span 伪数组集合
document.body.MatchesSelector("body.page") // 这个方法能够判断能否 被以上两个方法选择返回
document.getElementsByTagName("标签名") // 获取标签名 集合
document.getElementsByClassName("class名") // 获取 class 集合
document.getElementsByName("name属性值") // 使用在表单元素

div.namedItem("aa") // div 中 name 属性为 aa 的集合
div["aa"] // div 中 name 属性为 aa 的集合
div.tagName // DIV 在 HTML 中始终以大写表示

document.title // 取得文档标题
document.URL // 取得地址栏显示的 URL 不能修改
document.domain // 域 p2p.wrox.com 修改成 wrox.com 可以成功 修改成其他跨域会出错
document.referrer // 取得来源此页面的URL

// 特殊集合
document.anchors // 所有带 name 特性的 a 标签
document.forms // 所有 form 元素
document.images // 所有 img 元素
document.links // 所有带 href 特性的 a元素

querySelector 系列是静态的，在获取元素之后新添加的节点不会加进来

2.2 操作节点

p.nodeType == 1// true 判断是否存在节点 是不是一个元素
// 1 元素节点 2 属性节点 3 文本节点

p.nodeName
// #text 文本节点的名字
// P  元素节点的元素名 大写
// #comment 注释节点的名字

p.nodeValue // 文本节点的内容
// 必须是文本节点，元素节点会返回 null

父元素.children 获取子节点
// IE9+ 正常
// IE8-中 会获取 注释和元素节点

// 父节点
p.parentNode;// 获取直系父元素
p.offsetParent;// 获取上一个带有定位的父元素，position:stalic不算
/*
兼容方法
  firstchild 都有值，firstElementChild IE 会 undefined
  短路运算
  firstElementChild || firstchild;
*/

// 子节点
p.firstChild;// 标准浏览器获取第一个 文本或换行 节点，IE 只获取第一个元素
p.firstElementChild;// 标准浏览器只获取第一个元素，IE 为 undefined
lastElementChild || lastChild; 最后一个子节点

// 兄弟节点
p.previousElementSibling || p.previousSibling;// 上一个兄弟节点
p.nextElementSibling || p.nextSibling;// 下一个兄弟节点

2.3 属性操作

div.getAttribute("className") // 获取属性
div.setAttribute("class", "ft") // 设置属性
div.removeAttribute("class") // 删除属性
div.attributes // 获取 div 所有的属性 返回集合

五.dom modify

// 新建节点
var li = document.createElement("p") // 新建li元素
var text = document.createTextNode("wenben") // 新建文本

// 插入节点
父节点.appendChild(li) // 父节点的末尾插入
父节点.insertBefore(li, 参照子节点) // 在参照子节点前插入

// 替换节点
// 替换之前的文本依然还在 ，但它在文档中已经没了自己的位置
父节点.replaceChild(新节点, 被替换的子节点) // 替换

// 删除节点
// 移除的节点仍然为文档所有，只不过没有了自己的位置
父节点.removeChild(子节点) // 删除子节点
节点.remove() // 自己删除自己

// 克隆节点
节点.cloneNode(false) // 默认：只复制本身空标签
节点.cloneNode(true) // 本身与所有子节点都复制

2.4 样式操作

// 兼容所有浏览器

function getStyle(node, cssStyle) {
  // IE获取  标准浏览器
  return node.currentStyle
    ? node.currentStyle[cssStyle]
    : getComputedStyle(node)[cssStyle]
}

getComputedStyle(div)["width"] // 标准浏览器
div.currentStyle["width"] // 兼容 IE 浏览器

// div.style 只能获取到行间的 css 样式
div.style.cssText = "width: 200px;height: 30px;" // 设置 css 样式
div.style.getPropertyValue("width") // 200px 取得宽度值
div.style.removeProperty("width") // 删除 width 属性

// 取得计算后的 css 样式
div.style.cssText = "width:200px"
div.style.getPropertyValue("width") // 取得设置 cssText 的样式

2.5 classList

div.classList.remove("user") // 删除 user 类
div.classList.add("current") // 添加 current 类
div.classList.toggle("user") // 切换 user 类
div.classList.contains("d") // 判断是否有 d 类
btn.onfocus() // 获取焦点
btn.onblur() // 取消焦点

// 兼容模式
document.compatMode // 标准模式下 CSS1Compat 混杂模式下 BackCompat

// data- 属性
var name = div.dataset.name // 123 取得自定义 data 属性的值
div.dataset.name = "222" // 设置 data 属性的值