前端开发 - DOM

本节内容

一、查找元素

　　1. 直接查找

　　2. 间接查找

二、操作

　　1. 内容

　　2. 属性

　　3. class操作

　　4. 标签操作

　　5. 提交表单

　　6. 其他操作

三、事件

 

 

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，

可以改变文档的内容和呈现方式。

我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容

 

一、查找元素

 

1. 直接查找

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

注意区别：Element还是Elements

2. 间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

常用Element系列，而Node系列会包含控制符号

 

二、操作

 

1. 内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

 

document.getElementById('id1').innerText   只获取文本
document.getElementById('id1').innerHTML  获取文本以及标签
innerText = "文本"
innerHTML = "HTML格式解析"
input：
　　document.getElementById('id1).value
　　document.getElementById('id1').value = 'text'　

2. 属性

a. 自定义属性

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

b. 内置属性

如 obj = checkbox的 obj.checked true或false

标签有内置属性时，优先使用内置属性形式

3. class操作

var tag = document.getElementById('i1');
tag.classList.add('c1')     //给标签添加样式
tag.classList.remove('c1') //给标签移除样式

<div class='c1 c2'></div>
tag.className "c1 c2"
tag.classList ['c1','c2']　

4. 标签操作

a. 创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/jonathan1314'>jonathan</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. 提交表单

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

6. 其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

　

三、事件

 

 

 

 

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

    2. 绑定事件 ************** 推荐使用
        <div id='i1'> 点我 </div>
        <script>
            document.getElementById('id').onclick = function(event){
                //event -> 当前事件相关的信息
                // this 可以直接使用
            }
        </script>
       一个对象只能绑定一种事件
       
    3.addEventListener
        document.getElementById('id').addEventListener('click',func1)
        document.getElementById('id').addEventListener('click',func2)
        PS：addEventListener第三个参数
        默认：冒泡式，从内到外
        True：捕获式，从外到内