DOM文档对象模型

 

元素：

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

 

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

 

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

 

******************************************************

常规属性

innerText   文本

outerText

innerHTML   HTML内容

innerHTML  

value       值

 

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)         // 获取指定标签属性

 

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

 

创建标签：

// 方式一

var tag = document.createElement('a')

tag.innerText = "xx"

tag.className = "c1"

tag.href = "https://www.baidu.com"

 

// 方式二

var tag = "<a class='c1' href='https://www.baidu.com'>xx</a>"

 

操作标签

// 方式一

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])

 

样式操作：

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>

位置操作：

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.geElementById('form').submit() 　　　　提交表单

console.log                　　 输出框

alert                      弹出框

confirm                     确认框

  

// URL和刷新

location.href              　　　　 获取URL

location.href = "url"     　　　　　　　　　　　　  重定向

location.reload()   　　　　　　        重新加载

  

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

 

******************************************************

事件：

 

1. 绑定事件
<div id='i1' onkeydown='func(this,event,123);'> 点我 </div>
function func(a,b,c){
// a -> 当前被点击的标签对象  document.getElementById('i1')
// b -> 当前事件相关的信息
// c = 123
}

2. 绑定事件 ***************
<div id='i1'> 点我 </div>

<script>
    document.getElementById('i1).onclick = function(event){
    // event -> 当前事件相关的信息
    // this  -> 当前被点击的标签对象
    }
</script>
3. 绑定事件
document.getElementById('i1').addEventListener('click',function(){
console.log(111);
},true)
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
},true)

PS: addEventListener第三个参数
默认：
事件冒泡
捕获式