DOM 基础部分

DOM（document object model），是 w3c 组织推荐的处理 html或xml 的标准编程接口。我们可以通过 DOM 接口改变网页的内容、结构和样式

DOM 树：document、element、node

 

getElementById()

例如：

<script>
    var a= document.getElementById('this')
    console.log(a)
    console.log(typeof a)
    console.dir(a)
</script>

 

getElementsByTagName()  // 返回伪数组

还可以通过父元素来获取子元素：element.getElementsByTagName()（element 要先通过 DOM 获取）

 

getElementsByClassName()  // 返回伪数组

 

querySelector()  // 返回指定选择器的第一个元素对象

例如：

// 通过类名选择
var a = document.querySelector('.classname')
// 通过id名选择
var b = document.querySelector('.idname')
// 通过标签名选择
var c = document.querySelector('li')

 

querySelectorAll()   // 返回指定选择器的所有元素对象（伪数组的形式）

 

document.body  // 返回 body 元素对象

document.documentElement  // 返回 html 元素对象

 

事件三要素：事件源（如：按钮） 事件类型（如：鼠标点击） 事件处理程序

例如：

    <button id="btn">mybutton</button>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            alert('you click my button');
        }
    </script>

注意任何元素都可以添加事件类型，此处的 button 也可以换成 div

 

改变元素内容：

element.innerText  // 不识别 html

element.innerHTML  // 识别 html

 

改变元素属性：

element.attribute = value

element.setAttribute(attribute, value)  // 针对自定义属性

element.removeAttribute(attribute)

例如，需要改变 image 的 src 属性，直接对 image.src 赋值即可

注意对于类的修改：

div.className = 'new'
div.setAttribute('class', 'new')  // 不是 className

H5 规定了自定义属性以 data- 开头，并新增了获取自定义属性的方法：element.dataset.xxx / element.dataset['xxx']（注意如果：data-list-name，要使用 element.dataset.listName）

 

改变表单

例如：

    <button id="btn">mybutton</button>
    <input type="text" value="输入内容" id="inp">
    <script>
        var btn = document.getElementById('btn');
        var input = document.getElementById('inp');
        btn.onclick = function () {
            input.value = '被点击了';
            this.disabled = true;
        }
    </script>

注意 this 代表事件函数的调用者 btn

 

改变元素的样式属性：

element.style

element.className

例如：

    <script>
        var div = document.getElementById('div');
        div.onclick = function () {
            // 样式采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '200px';
        }
    </script>

如果需要更改多种属性，那么使用 style 修改会比较麻烦，我们可以在 css 中定义一个类的样式，随后将某个元素通过 className 修改为此类的样式（注意可以为多类名选择器，例如：this.className = 'first second'）

 

获取属性值

例如：

// 获取内置属性
console.log(div.id)
// 获取自定义属性
console.log(div.getAttribute('index'))

 

页面中的所有内容都是节点（标签、属性、文本、注释），用 node 表示

节点拥有三个基本属性：nodeType nodeName nodeValue

其中元素节点、属性节点、文本节点的nodeType分别为1、2、3

 

父节点：node.parentNode

子节点：node.childNodes（包含的子节点包括元素节点和文本节点）/ node.children（只包含元素节点）

例如：

    <ul id="myli">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var a = document.querySelector('#myli')
        console.log(a.childNodes)
    </script>

结果会有9项，我们可以通过 for 循环来获取子节点中的元素节点

 

节点操作：

node.firstChild / node.lastChild（注意获得的可能是文本节点）

node.firstElementChild / node.lastElementChild

node.nextSibling / node.previousSibling（注意获得的可能是文本节点）

node.nextElementSibling / node.previousElementSibling

 

document.createElement()

node.appendChild(child)

node.insertBefore(child, 指定元素)

例如：

var ul = document.querySelector('#ul')
var li = document.createElement('li')
ul.appendChild(li)
ul.insertBefore(li, ul.children[0])

node.removeChild(child)

node.cloneNode()  // 若不传入参数，或者传入 false ，为浅拷贝，即只拷贝节点本身，不拷贝子节点；传入 true ，为深拷贝，即同时拷贝本身节点和子节点

 

document.write()  // 不常使用，容易导致页面重绘