DOM以及DOM的基本操作

DOM以及一些基本操作

DOM简介：

Document Object Model文档对象模型

1.文档：document

一个网页就是一个文档

2.对象：Object

对象：网页中的每一个部分都转换成了对象

3.模型：Model

使用模型来表示对象之间的关系，这样方便我们获取对象
模型能很清楚的显示节点与节点之间的关系。

Node

节点是构成我们网页最基本组成部分，网页中的每一个部分都可以称为一个节点。
eg：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但实际上他们的具体类型不同，节点的类型不同，属性和方法也不尽相同。

节点的分类

1.文档节点：整个HTML文档。
2.元素节点：HTML文档中的HTML标签。
3.属性节点：元素的属性。
4.文本节点：HTML标签中的文本内容，包括空格回车等。

节点的属性

1.文档节点

nodeName ：#document
nodeType：9
nodeValue：null

2.元素节点

nodeName ：标签名
nodeType：1
nodeValue：null

3.属性节点

nodeName ：属性名
nodeType：2
nodeValue：属性值

4.文本节点

nodeName ： #text
nodeType：3
nodeValue：文本内容

事件

就是文档或浏览器窗口发生的一些特定的交互瞬间 JavaScript与HTML之间是通过事件实现交互的。
对于web应用来说，有下面这些代表性的事件，点击某个元素、将鼠标移动至某个元素上方、按下键盘上的某个键，等等。
可以为按钮对应事件绑定处理函数的形式来响应事件，当事件触发时其对应的函数将会被调用。
如下面的代码，绑定一个单击事件：

btn.onclick = function(){
        alert('点点点')
    };

像这种单击事件绑定的函数，称为单击响应函数。

DOM的基本操作

对节点的增删改查。

查

一、查看元素节点

注意：选择出的元素是类数组

1.getElementById(’’)

通过ID选出元素，如果没有id，name值为only也可以选择出来。

 var div = document.getElementById('only')

2.getElementsByTagName(’’)[0]

通过标签名来选择 需要加一个[索引值] 兼容性很好。

var div = document.getElementsByTagName('div')[0];

3.getElementsByClassName(’’)[0]

通过类名选择元素，但是存在兼容性问题，不能兼容ie9以下的版本。

var div = document.getElementsByClassName('div')[0];

4.getElementsByName(’’)[0]

通过name值选择元素 注意：只有部分标签name可生效（表单、表单元素、img、iframe）。

 var div = document.getElementsByName('div')[0];

在这里要提醒大家注意的是，在日常程序的编写中，尽量不要用Id选择器，在调试的时候容易出现问题。

css选择器

1. getComputedStyle(元素对象，null)

获取所有样式
参一：元素对象
参二：是否获取伪元素 null 表示不获取

注意：仅支持谷歌获取，不支持低版本ie（ie8以下）

解决低版本ie兼容性问题：currentStyle

<div class="wrap" style="border-radius: 50%;"></div>

 <style>
        .wrap{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

var wrap = document.getElementsByClassName('wrap')[0];
var res = getComputedStyle(wrap,null);
console.log(res.width);
// 样式兼容性问题
function getStyle(el){
    if(el.currentStyle){
        return el.currentStyle;
    }else{
        return getElementsByClassName(el,null);
    }
}
    

2.document.querySelector()

var div = document.querySelector('div>span strong');

3.document.querySelectorAll()

var div = document.querySelectorAll('div>span strong')

二、节点的获取方法

1.遍历dom树

（1）strong.parentNode

父节点
最顶端的parentNode是document,元素只有一个父节点。

（2）childNodes

子节点们
即使文本节点为空，也会计算上。

（3）firstChild

第一个子节点
一个分支中的第一个节点。

（4）lastChild

最后一个子节点

（5）nextSibling

最后一个兄弟节点

（6）previousSibling

前一个兄弟节点

2.基于元素节点树的遍历

（1）parentElement

返回当前父元素节点（IE不兼容）

（2）children

只返回当前的元素子节点

（3）firstElementChild

返回第一个元素节点（IE不兼容）

（4）lastElementChild

返回第一个元素节点（IE不兼容）

（5）nextElementSibling

返回后一个兄弟元素节点

（6）previousElementSibling

返回前一个兄弟元素节点

三、节点的四个属性

1.nodeName

元素的标签名，以大写的形式表示，只读。

2.nodeValue

text节点或者Comment节点的文本内容，可读写。

3.nodeType

获取该节点的类型，只读(很重要！！！)

4.attributes

Element节点的属性集合

四、节点的方法

Node.hasChildNode()

查看该元素中是否有节点（空格回车等都是文本节点）

增

1.appendChild(参数)

向元素里增加子元素的方法，可以累加。
语法：父元素.appendChild(子元素)。

2.createElement()

通过js的方式新建标签
var node = document.createElement('p');
node.innerHTML = 'wyh is a pig';
console.log(node);
// 获取wrap 通过css选择器
var wrap = document.querySelector('.wrap');
console.log(wrap);

改

1.innerHTML

重新赋值，获取的自身元素下的所有内容，包括标签。

box.innerHTML = 'hello';
console.log(content.innerHTML = '1234&nbsp; &nbsp; &nbsp;56<h1>hhhh</h1>');
//修改时， 可以自动解析赋值中的标签以及特殊字符（&nbsp;） 

2.innerTEXT

获取本身和所有的后代元素的文本内容。

console.log(content.innerText = '1234&nbsp; &nbsp; &nbsp;56<h1>hhhh</h1>');
// 修改时，不解析赋值的内容，包括标签 包括(&nbsp);

删

1.removeChild(child)

语法：父元素.removeChild(子元素)。
作用：删除父元素下的某个子元素。

  btn.onclick = function(){
        wrap.removeChild(p)
    }

2.remove()

删除元素自身。

 var h1 = document.getElementsByTagName('h1')[0];
 h1.onclick = function(){
      h1.remove();
 }

列表删除

// 获取按钮
    var btns = document.querySelectorAll('li>button');
    // 遍历button按钮
    for(var i = 0;i<btns.length;i++){
        (function(){
            var x = i;
            btns[x].onclick = function(){
                // 点击删除li,根据btn[x]获取父节点li
                var parent = btns[x].parentNode;
                // 删除父节点li
                parent.remove();
            }
        })();
    }