javascript DOM 文档对象模型
❝在HTML页面，文档元素是元素。
节点关系图：类似家谱❞ 节点关系图
Document 对象
document.documentElement // 取得<html>的引用
document.body // <body>**</body>
document.doctype // 文档类型声明
document.title // 文档标题
document.URL // 完整的url，即地址栏中的显示的URL地址
document.domain // 只包含页面的域名
document.referrer // 取得来源页面的URL
# 查找元素
document.getElementById('id') // 根据ID查找
document.getElementsByTagName('myElement') // myElement 要取得元素的标签名，返回一个类数组的动态节点集合
document.getElementsByName('name') // 返回带有给定name特性的所有元素 一般用于单选按钮
# 新增
document.getElementsByClassName('user box') // 取得所有类中包含 user 和 box 类名的元素。类名的先后顺序无所谓
# 特殊的集合
document.anchors // 所有带name属性的<a>元素
document.forms // 包含文档中所有的<form>元素
document.images // 包含文档中所有的<img>元素
document.links // 包含文档中所有带href属性的<a>元素
# 文档写入方法
document.write('新内容')
document.writeln('新内容') // 会在新增的内容后加上换行符
open() // 打开网页
close() // 关闭网页
var mywin=window.open('https://www.baidu.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close(); // 会关闭上面打开的百度网页
# 属性操作方法 获取，设置，移除
var div = document.getElementById('div');
div.getAttribute('id') // 获取id属性
div.setAttribute('class','j-class') // 设置class属性值为j-class
div.removeAttribute('id') // 彻底删除元素的id属性
// 注意点：根据HTML5规范，自定义属性应该加上 data-前缀以便验证。
div.setAttribute('data-name','zhansan') // 设置自定义属性
# 元素的创建
var divEle = document.createElement("div") // 创建一个div元素
divEle.id = 'j-id'
divEle.className = "box"
# 创建文本节点
var textNode = document.createTextNode('Hello world!');
# 创建文档片段
var fragment = document.createDocumentFragment();
var ul = document.getElementById('list')
var li = null
for (var i=0;i<3;i++){
li = document.createElement('li');
li.appendChild(document.createTextNode('我是'+(i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment); // 通过文档片段一次性添加到文档，可以优化性能，减少dom的操作
DOM 扩展
1.选择符 API
❝
jQuery 的核心就是通过CSS选择符查询DOM文档取得元素的引用.
选择符 API是由W3C发起制定的一个标准，致力让浏览器原生支持CSS查询。
Selectors API核心方法有两个：❞
querySelector()：返回的是匹配的第一个元素，没有找到返回null
- 通过
Document调用时，会在文档元素的范围查找匹配的元素。- 通过
ELement类型调用时，会在该元素后代元素的范围内查找匹配的元素querySelectorAll()：返回的是所有匹配的元素，是一个nodeList集合。
2.元素的遍历
❝对于元素间的空格，IE9及之前的版本不会返回文本节点，其他所有浏览器会返回文本节点，这样就导致了在遍历时，不一致。为此，新定义了一组属性，来进行元素遍历。
❞
childElementCount: 返回子元素的个数，不带注释和文本节点firstElementChild: 指向第一子元素lastElementChild: 指向最后一个子元素previousElementSibing: 指向前一个同辈元素nextElementSibing:指向后一个同辈元素
<body>
<h2>222</h2>
<ul id="list">
<li>1</li>
<li><p>2</p></li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ulEle = document.querySelector('#list')
ulEle.childElementCount // 4
ulEle.firstElementChild // <li>1</li>
ulEle.lastElementChild // <li>4</li>
ulEle.nextElementSibling // <script>…</script>
ulEle.previousElementSibling // <h2>222</h2>
</script>
</body>
HTML5 新增的API
# 通过类名查找元素
document.getElementsByClassName('user box') // 取得所有类中包含 user 和 box 类名的元素。类名的先后顺序无所谓
# 操作 classList 属性新增的方法
# classList.add('className') 添加指定的类名，如果有，则不添加
# classList.contains('className') 判断是否存在指定的类名，存在返回true，不存在返回false
# classList.remove('className') 移出指定的类名
# classList.toggle('className') 如果类名列表里有则删，无则加
div.classList.add('box') // 新增一个box的类名
var divEle = document.createElement("div") // 创建一个div元素
divEle.classList.add('box') == divEle.className = "box" // 两者相同
自定义数据属性
❝为元素添加非标准的属性，必须使用data- 前缀。
❞
<div id="mydiv" data-appId="123" data-myname="zhangsan"></div>
var div = document,getElementById("mydiv");
var appid = div.dataset.appId; // 获取自定义属性值
div.dataset.myname = "wangwu"; // 设置值
插入标记 innerHTML、 outerHTML、insertAdjiacentHTML()方法
# innerHTML 属性 ：返回与调用元素的所有子节点，包含元素，注释，文本节点对应的HTML标记。【从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身】
# outerHTML 属性 ：返回调用它的元素及所有子节点的HTML标签。【包括自身】
# insertAdjiacentHTML(where,html)方法 ：where插入位置和html要插入的HTML文本
where:包括beforeBegin,beforeEnd,afterBegin,afterEnd
beforeBegin: 插入到开始标签的前面。
beforeEnd:插入到结束标签的前面。
afterBegin:插入到开始标签的后面。
afterEnd:插入到结束标签的后面。
scrollIntoView()
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
本文使用 mdnice 排版
