DOM简介

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、DOM简介

DOM全称为Document Object Model （文档对象型模型），是HTML和XTML文档编程的接口，且定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的样式，结构和内容。简单来说，DOM可以使我们操作HTML中的元素。

DOM树

DOM将文档解析为由节点和对象组成的结构集合，包括其中的属性和 方法对象。如下图：

文档 ：一个页面就是一个文档，DOM中用 document 表示

元素 ：页面中所以的标签都是元素，用element表示

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

二、获取页面元素

1.通过id获取

通过id的属性来获取对象，使用document.getElementByTd（‘id属性’）方法

示例如下：

     <div id="one"> ice-cream </div> 
    <script>
    var one = document.getElementById('one');
        console.log(one);

    </script>

2.通过标签名获取

通过标签名来获取，可以返回所有指定标签名的对象集合，使用document.getElementByTagName(‘标签名’)

示例如下：

    <p id="demo"></p>
    <p id="index"></p>
    <p id="set"></p>

    <p id="get">
        yyyy
    </p>
    <script>
        var pra = document.getElementsByTagName('p');
        console.log(pra);
    </script>

通过标签名获得的使元素对象的集合，以伪数组的形式存储

getElementsByTagName()也可以获取某个元素内的子元素

3.H5新增获取方式

通过类名获取

可以通过类名获取元素，使用document.getElementByClassName('类名‘）

示例如下：

    <div class="fruit">
        straberry
    </div>
    <script>

        var fruiy = document.getElementsByClassName('fruit');
        console.log(fruiy);
    </script>

通过querySelector获取

使用document.querySelector可以返回指定选择器的第一个元素对象

示例如下：

    <div class="fruit">
        straberry
    </div>
    <div class="fruit">
        apple
    </div>
    <script>

        var firstone = document.querySelector('.fruit');
        console.log(firstone);
    </script>

通过querySelectorAll获取

使用document.querySeleorAll可以返回指定选择器的所有元素对象

示例如下：

   <div class="fruit">
        straberry
    </div>
    <div class="fruit">
        apple
    </div>
    <script>
        var all = document.querySelectorAll('.fruit');
        console.log(all);
    </script>

4.获取特殊元素

获取body元素

获取body元素直接使用document.body 方法


示例如下：

    <script>
        var bodyEle = document.body;
        console.log(bodyEle);
    </script>

获取HTML元素

获取HTML元素直接使用document.documentElement方法

示例如下：

    <script>
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

三、事件

事件是可以被 javascript 侦测到的行为，网页中每个元素都可能触发javascript 的事件，比如在点击一个按钮时，将会产生一个事件，去执行某些操作。

1.事件三要素

1.事件源
2.事件类型
3.事件处理程序

事件源，就是事件被触发的对象，比如按钮；事件类型，指触发的是什么事件，比如点击按钮；而事件处理程序，是指通过一个函数赋值的方式来完成。

示例如下：

    <button id="one">
        啦啦啦
    </button>
    <script>
        var btn = document.getElementById('one');
        btn.onclick = function(){
            alert('why click it!?');
        }
    </script>

2.操作元素

由上可以知道，通过DOM可以操作元素属性，以下为操作元素的以下方式

修改元素属性

常用元素属性的操作

innerText、innerHTML 可以改变元素内容

src、href

id、alt、title

表单元素属性操作

一般利用DOM可以操作这些表单元素：type、value、checked、selected、disabled

以type为例：

    <button>按钮</button>
    
    <input type="text " value="输入内容">
    <script>

        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        btn.onclick = function(){
            input.value = "已点击";
        }
    </script>

disabled属性可以设置或返回是否禁用某些标签，常用于表单中

以上一个代码为例，添加disabled属性：

    <button>按钮</button>
    
    <input type="text " value="输入内容">
    <script>

        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        btn.onclick = function(){
            input.value = "已点击";
            this.disabled = true;
        }
    </script>

如果disabled的值为true，则会禁用相应的标签，如果值为false，则不会禁用。

样式属性操作

通过DOM可以修改元素的大小，颜色，位置等，使用的方法为element.style、
element.className

element.style(行内样式操作）

示例如下：

    <div id="two">
        text
    </div>
    <script>

        var div = document.getElementById('two');

        div.onclick = function(){
            this.style.backgroundColor = 'orange';
            this.style.fontSize = '40px';
            this.style.color = 'blue';
        }
    </script>

注意JS中命名采取驼峰命名法

JS中修改style样式，产生的是行内样式，css的权重比较高

element.className（类名样式操作)

element.className相较于element.style方法，操作更加简洁，在需要改动元素的多个性质时使用较高。

示例如下：

    <style>
        .tt {
            background-color: orange;
            font-size: 40px;
            color: blue;
        }
    </style>
    <div id="two">
        text
    </div>
    <script>

        var div = document.getElementById('two');

        div.onclick = function(){
            // this.style.backgroundColor = 'orange';
            // this.style.fontSize = '40px';
            // this.style.color = 'blue';
            this.className = 'tt';
        }
    </script>

3.自定义属性操作

获取属性值

1.element.属性

可以获取内置属性，即元素本身的自带属性

2.element.geyAttribute(‘属性’)

主要获取自定义属性，即自己定义的属性。

示例如下：

 <div id="demo" index="1"></div>
    <script>
         var div = document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('index'));

    </script>

设置属性值

1.element.属性

可以设置元素的内置属性

2.element.setAttribute(‘属性’，‘值’）

可以设置自定义的属性

示例如下：

    <div id="demo" index="1" class="aio"></div>
    <script>
        
        div.id='nav';
        div.className='aios';
        // div.setAttribute('class','aios')
        div.setAttribute('index','2');
        console.log(div.id);
        console.log(div.className);
        console.log(div.getAttribute('index'));

    </script>

使用setAttribute方法来改写class的属性时，不是写className，而是class

移除属性值

removeAttribute('属性‘）

示例如下：

    <div id="demo" index="1" class="aio"></div>
    <script>
       div.removeAttribute('class');
    </script>

4.H5自定义属性

有些自定义属性可能会产生歧义，不易判断是内置属性还是自定义，所有H5新增了自定义属性。

设置自定义属性

H5 规定自定义属性开头为 data-

也可以使用JS设置

例如：

    <div id="uo" data-index="ao" data-list-name="eo"></div>
    <script>
    
        var xo = document.querySelector('div');
        xo.setAttribute('data-time','30');
</script>

获取自定义属性

目前有两种方法：
element.getAttribute(’data-名称‘）

element.dataset.名称 或 element.dataset[’名称‘]

例如：

    <div id="uo" data-index="ao" data-list-name="eo"></div>
    <script>

         
        var xo = document.querySelector('div');
        xo.setAttribute('data-time','30');
        console.log(xo.getAttribute('data-time'));
        // console.log(xo.dataset.index);
        console.log(xo.dataset.listName);
        console.log(xo.dataset['index']);
     </script>

当自定义属性命由多个 - 连接时，在使用 getAttribute（）获取时，需遵从驼峰命名法

四、节点

除了上述DOM获取元素的方法，也可以利用节点的层级关系获取元素。

1.基本属性

一般节点都有三大属性：nodeType节点类型，nodeName节点名称，nodeValue节点值

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

2.节点层级关系

利用DOM可以把节点分为不同的层级关系，常见的有父子，兄弟关系

父子节点

表示父节点的属性为：node.parentNode
表示子节点的属性为：parentNode.childNodes

示例如下：

  
    <div class="dex">
        <div class="inner">
            @.@
        </div>
    </div>
        <ul >
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var li = document.querySelector('ul');
        console.log(li.childNodes);

        var dexs = document.querySelector('.inner');
        console.log(dexs);
        console.log(dexs.parentNode);
     </script>

如果没有父节点，则将返回null，并且parentNode返回的是最近的一个父节点

注意parent.childNodes返回值里面包含了所有的子节点，包括元素节点，文本节点等，所有上面代码返回的子节点有9个

parentNode.child
为了避免上述情况出现（获取全部元素），可以运用此属性，只返回子元素节点，其他文本元素不会返回

parentNode.firstChild / parentNode.firstElementChild

返回第一个子节点，前者返回所有元素，后者只返回子元素节点，如果没有子元素则返回null

parentNode.lastChild / parenNode.lastElementChild

返回最后一个子节点元素，前者返回所有元素，而后者只返回子元素节点如果没有子元素则同上

兄弟节点

node.nextSibling / node.nextElementSibling

可以返回当前元素的下一个兄弟节点，前者返回全部元素，后者只返回子元素节点，没有则返回null

示例如下：

        <p>$.$</p>
        <span>#.#</span>
        <div class="inner">
            @.@
        </div>
    <script>
        var uu = document.querySelector('span');
        // console.log(uu);
        console.log(uu.nextSibling);
        console.log(uu.nextElementSibling);
    </script>

node.previousSibling / node.previousElementSilbling

可以返回当前元素的上一个兄弟节点，同上，前者返回全部元素，后者只返回子元素节点，没有则返回null

示例如下：

        <p>$.$</p>
        <span>#.#</span>
        <div class="inner">
            @.@
        </div>
    <script>
        var uu = document.querySelector('span');
        console.log(uu.previousSibling);
        console.log(uu.previousElementSibling);
    </script>

---