DOM学习笔记

DOM的定义

文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找元素

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 # 上一个兄弟标签元素

内容操作

innerText   # 文本
outerText   
innerHTML   # HTML内容(包括元素、注释和文本节点)
value       # 获取input/select/textarea里面输入的内容

属性操作

attributes                # 获取所有标签属性
setAttribute(key,value)   # 设置标签属性
getAttribute(key)         # 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

标签操作

1、创建标签

# 方法一
var tag = document.createElement('a')
tag.innerText = "百度"
tag.href = "http://www.baidu.com"
 
// 方式二
var tag = "<a href='http://www.baidu.com'>baidu</a>"

2、操作标签

# 方法一
var obj = "<input type='text' />";
obj.insertAdjacentHTML("beforeEnd",obj);
obj.insertAdjacentElement('afterBegin',document.createElement('p'))
 
#注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
# 方法二
var tag = document.createElement('a')
tag.appendChild(tag)
tag.insertBefore(tag,tag[1])

样式操作

<div class="c1">百度一下，你就知道</div>

var obj = document.getElementById('c1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

位置操作

# 总文档高度
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代指文档根节点
'''

事件

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
    </div>

    <script>
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value = ""
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length == 0){
                tag.value = "请输入关键字"
            }
        }
    </script>
</body>
</html>

鼠标失去、获得焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <script>
        var myTrs=document.getElementsByTagName('tr');
        for(var i=0; i < myTrs.length; i++){
            myTrs[i].onmousemove = function(){
                this.style.backgroundColor='red';
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor=""
            }
        }
    </script>
</body>
</html>

高亮显示