JavaScript中的Dom

什么是DOM

DOM(document object model) 文档对象模型，表示一个页面文档的模型

DOM的作用

是浏览器提供的一个操作页面内容的接口,通过DOM，编程语言可以操作浏览器加载的页面中的任意元素（a,p,div,span,文本、脚本.....）,DOM建立了js和页面的桥梁

DOM特点

增、删、改、查

先说DOM中的查，
查分为三大类。分别是：通过元素间的关系、通过HTML间的关系、通过选择器查找

元素节点

元素间的关系

假如声明一个名为nav的变量

nav.parentElement   //名为nav的父辈元素节点

nav.children   //名为nav下的所有子元素节点

firstElementChild　//名为nav下的第一个子元素

lasElementChild    //名为nav下的最后一个子元素

previousElementSibling  //名为nav的前一个元素，兄弟元素

nextElementSibling  //名为nav的后一个元素，兄弟元素

HTML节点

HTML间的关系

var item=document.getElementById('ID名');  //通过ID查找

var item=document.getElementsByClassName('class名');  //通过类名查找

var item=document.getElementsByTagName('标签名');  //通过HTML中的标签名查找

var item=document.getElementsByName('表单元素中的name');  //通过HTML的表单元素中的name属性

    HTML节点的特点是
        1）ID查找特点：ID具有唯一性，只有一个所以只能找到一个
        2）类查找特点：类是多个性，可以找到很多，特点是返回的是动态数组集合
        3）标签查找特点：标签是多个性，可以找到很多，特点是返回的是动态数组集合
        4）name查找特点：name是多个性，可以找到很多，特点是返回的是动态数组集合

选择器节点

利用选择器

var ele=document.querySelector(‘支持ID名、类名、标签’);  //找到一个选择器

var ele=document.querySelectorAll(‘支持ID名、类名、标签’);  //找到多个选择器

选择器节点的特点是
1）都支持ID名、class名、HTML标签
以上是查
——————————————————我是分割线—————————————————

DOM中的删除

DOM中的删除： remove()；
remove()要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点把自己删掉，例如：

HTML代码块

<p>我是JavaScript中的DOM文档对象模型，点击我删除</p>

JavaScript代码块

     var rse = document.querySelector('p');     //通过选择器找到删除节点
     rse.onclick = function() {      //节点点击事件
        rse.parentElement.removeChild(this);     //删除父节点
     }

以上是删
——————————————————我是分割线—————————————————

DOM中的增

DOM中的增加： createElement();
DOM中的追加： appendChild();

示例：
HTML代码块

<input type="text" id="inp" value="" />     //文本输入框
<button onclick="btn()">添加</button>           //添加按钮      
<p></p>                           //文本指定地点

JavaScript代码块

function btn() {
    var p = document.createElement('p');      //创建p元素
    document.querySelector('p').appendChild(p).innerHTML = inp.value;     //追加文本内容到指定地点
    inp.value = "";      //添加按钮点击一次输入框清空一次
}

以上是增
——————————————————我是分割线—————————————————

DOM中的改

DOM中的改，可以改变HTML中的文档
示例：
HTML代码块

<p id="p2">Hello world!</p>   //内容，指定地点

JavaScript代码块

document.getElementById("p2").innerHTMl="Are you ok?";   //将指定地点的内容修改为Are you ok?

DOM中的改，可以改变css中的样式
示例：
HTML代码块

<p id="p2">Hello world!</p>   //内容，指定地点

JavaScript代码块

document.getElementById("p2").style.color="blue";    //将指定地点字体颜色改为蓝色