参考文章 www.cnblogs.com/sharkjiao/p…
概念
- DOM概念
- DOM树
获取
-
返回单个元素
document.getElementById('id')
document.querySelector('选择器'); -
返回元素集合 document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');
document.getElementsByClassName('类名');
document.querySelectorAll('选择器'); -
特殊元素 如 body html document.body
document.documentElement
操作元素
- innerText （会去除空格和换行）
- innerHtml （保留空格和换行）
常用表单操作元素
type value checked selected disabled
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
样式属性操作
1.行内样式操作：element.style 2.类名样式操作：element.className
获取属性值
- element.属性
- 获取自定义属性值：element.getAttribute('属性')
设置属性值
- element.属性='值'
- element.setAttribute('属性','值')
- element.removeAttribute('属性')
H5规定自定义属性以 data- 开头，作为属性名并且赋值
element.getAttribute('data-index');
IE11以上支持如下获取
element.dataset.index 或者 element.dataset[index]
DOM的核心总结
概述
对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口 对于HTML，DOM使得HTML形成了一棵DOM树，包含文档、元素、节点 关于DOM操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。 创建
document.write(); element.innerHTML 与数组结合，效率最高 createElement() 增加
node.appendChild(child) 末尾追加 node.insertBefore(child, 指定元素) 前置追加 删除
node.removeChild() 返回删除节点 修改
修改元素属性：src href title 修改普通元素内容：innerHTML innerText 修改表单元素：value type disabled 修改元素样式：style className 查询
DOM提供的API方法：getElementById getElementByTagName H5提供的新方法：querySelector querySelectorAll 利用节点操作获取元素：parentNode children previousElementSibling nextElementSibling 属性操作
setAttribute 设置DOM的属性值 getAttribute 得到DOM的属性值 removeAttribute 移除属性
