DOM编程从入门到忘记

文档对象模型（Document Object Model，DOM）是使用 W3C 定义的 API (Application Program Interface) 来操作 HTML 文档 （此处不局限于 HTML，亦可操作 XHTML、XML 等），使用户可以与进行页面交互。

它使用对象的表示方式来表示对应的文档结构及其中的内容。

通过使用 DOM 提供的 API (Application Program Interface) 可以动态的修改节点（node），也就是对 DOM 树的直接操作。 浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。

动态的修改节点可以分为两步，1. 找到一个节点或者说标签 2. 操作这个标签。

• 一、查找元素
  • 1、直接查找
  • 2、间接查找
• 二、操作元素
  • 1、内容
  • 2、属性
  • 3、class操作
  • 4、标签操作
  • 5、样式操作
  • 6、位置操作
  • 7、提交表单
  • 8、其他操作
• 三、事件

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

// 包含标签中间的文本
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

//不包含标签中间的文本
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二、操作元素

1、内容

innerText   纯文本
outerText
innerHTML   HTML内容,可以包含标签
outerHTML
value       表单标签选中的值

input表单类标签
input--text,password,check...

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

3、class操作

className                // 获取所有类名
classList                // 获取所有类名，以列表形式
classList.remove(cls)    // 删除指定类
classList.add("cls")       // 添加类

document.getElementById('gettxt').classList
>> ["c1","hide"]

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "dyan"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/***"

// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/***'>dyan</a>"

b.操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById('i1')

obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

<script>
   function Focus(ths){
       ths.style.color = "black";
       if(ths.value == '请输入关键字' || ths.value.trim() == ""){

           ths.value = "";
       }
   }

   function Blur(ths){
       if(ths.value.trim() == ""){
           ths.value = '请输入关键字';
           ths.style.color = 'gray';
       }else{
           ths.style.color = "black";
       }
   }
</script>

6、位置操作

总文档高度
document.documentElement.offsetHeight

当前文档占屏幕高度
document.documentElement.clientHeight

自身高度
tag.offsetHeight

距离上级定位高度
tag.offsetTop

父定位标签
tag.offsetParent

滚动高度
tag.scrollTop

/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

7、提交表单

document.geElementById('form').submit()

8、其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框

// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载

// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

三、事件

• onclick 单击
• ondblclick 双击
• onfocus 元素获得焦点
• onblur 元素失去焦点
• onmouseover 鼠标移到某元素之上
• onmouseout 鼠标从某元素移开
• onmousedown 鼠标按钮被按下
• onmouseup 鼠标按键被松开
• onkeydown 某个键盘按键被按下
• onkeyup 某个键盘按键被松开
• onkeypress 某个键盘按键被按下并松开

对于事件需要注意的要点：
a 绑定

方式一
<button onclick="displayDate()">试一试</button>

方式二
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

b 事件触发

this标签当前正在操作的标签，event封装了当前事件的内容

• this 触发当前事件的标签
• event 触发当前标签的事件内容 keycoode
• 事件链以及跳出
• 自定义事件 > 默认事件

<a href ="http://baidu.com" onclick="return Func();">sou baidu</a>
// 自定义事件优先级大于默认事件
// 阻止默认事件 加上 return
<script>
function Func(){
    alert(转去百度)；
    return false；  //true执行默认事件，false不执行默认事件
}
</script>