JavaScript-DOM操作

document是DOM的顶级对象

DOM 文档对象模型

1. 获取html中的标签对象

        方法一：好用，低版本ie不支持

                        var 变量 =document.querySelector('条件');

                                        获得符合条件的 第一个 标签对象

                                                执行结果是一个对象

                                        如果没有符合条件的标签对象 结果为null

                        var 变量 =document.querySelectorALL('条件');

                                        获得符合条件的 所有 标签对象

                                        执行结果是一个伪数组 NodeList

                                                也有length，索引，支持[]语法，但函数和真正的数组函数方法不同

                                        如果没有符合条件的标签对象 结果为空 length为0 的伪数组

‘条件’可以是html css 支持的所有语法形式:

标签 类选择器 / id选择器名称 [属性="属性值"]...

<div class="he" id="wor" name="na" >...</div>

var res1 = document.querySelector('div'); //标签

var res2= document.querySelector('.he'); //类选择器

var res3 = document.querySelector('#wor') ; //id选择器

var res7 = document.querySelector('[name="na"]'); //[属性="属性值"]

        方法二：不好用，但支持

                var 变量 =document.getElementById('id属性值');

                var 变量 =document.getElementByClassName();

                var 变量 =document.getElementByTagName(‘标签名称’);

                var 变量 =document.getElementByName(‘name属性值’);

特殊的标签的获取方法（前缀意义）

获取整个html文档

                document

获取html标签

              document.documentElement

获取head标签

                document.head

获取body标签

                document.body

获取title标签

                document.title

支持解析/识别标签的获取和设定

                var 变量 = 标签对象.innerHTML ; //获取

                标签对象.innerHTML = ' 内容'; //设定 '字符串'

! 标签对象.innerHTML = '内容' 覆盖赋值 覆盖原始内容

! 标签对象.innerHTML += '内容' 拼接赋值 原始内容后新增内容

不支持解析/识别标签的获取和设定

                var 变量 = 标签对象.innerText ; //获取

                标签对象.innerText = ' 内容'; //设定 '字符串'

操作 标签对象的属性

方法一 通用语法形式：支持所有属性操作 ！但不适用于布尔属性

                var 变量= 标签对象. getAttribute('属性') / / 获取该属性 的 属性值

                标签对象. setAttribute('属性','属性值') / /设定

                标签对象. removeAttribute('属性') / /删除

方法二 直接操作属性：一般操作标签支持的属性 以及 布尔属性

                                                ！所有标签都支持的属性id class title

        语法：点语法/ []语法

                        var 变量 = 标签对象.属性; / / 获取该属性 的 属性值

                                        标签对象.属性 = 属性值；

                        var 变量 = 标签对象[变量]

                                        标签对象[变量] = 数值

        布尔属性的操作（获取和设定都必须为布尔类型）

                        var 变量 = 标签对象.布尔属性; / / 获取语法

                        标签对象.布尔属性 = true; / / 设定语法 true执行

                        标签对象.布尔属性 = false; / / 设定语法 false不执行

        布尔属性：checked disabled

<input type="checkbox" checked>//此时的checked属性 没有属性值

var oIpt = document.querySelector('input');// 获取input标签对象

var method1 = oIpt.checked // 获取 布尔属性 checked，返回true

oIpt.checked = false ;//给 checked属性 赋值 false 设定 checkbox 是 不选中状态

var method2 = oIpt.getAttribute( 'checked' ); //也能选中 但无返回值

oIpt.removeAttribute( 'checked' ); // 删除 checked 属性 才是不选中状态

标签对象 的 class属性操作

        操作class属性 使用的名称是className

                        var 变量 = 标签对象.className;

                        标签对象.className = 属性值；

class属性的实际操作语法：class属性可以有多个属性值 有专门的操作语法

        标签对象.classList.add() / / 新增

        标签对象.classList.remove() / / 删除

        标签对象.classList.replace(参数1 , 参数2); / / 替换

                                                   参数1 ：原始内容  参数2 ：替换的新内容

        标签对象.classList.toggle() / / 切换

                                                原本有 删除

                                                原本没有 添加

标签对象 的样式设定

        以行内样式设定css

        在js中 ‘-’执行的是减法，所以带‘-’的属性，要写成小驼峰命名法

语法：

        标签对象.style.属性 = 属性值;

标签对象的样式获取

        方法1: var 变量 = 标签对象.style.属性; / /只能获取行内样式的属性值

        方法2:var 变量 = window.getComputedStyle(标签对象).属性;

获取css执行的的属性值

        获取的属性值 带有单位的字符串

可以通过 parseInt() 获取 整数部分

如果是 background 这样的复合属性 获取的是 所有属性的属性值

        若只获取一个属性的属性值 必须要使用 专门的属性 backgroundColor