浅谈DOM的概念和作用

首先呢,DOM在JS中就是 Document Object Model的缩写,简称就是文档对象类型,它给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式。不过我们要关心的是DOM如何把网页和脚本以及其他的编程语言联系起来。DOM是以家族的形式描述HTML。父子节点,兄弟节点。

DOM中的选择器:
一、元素节点选择器:(id,class,name,tagname,高级,关系)
 
    1.getElementById(id)        //获取指定元素的ID元素,返回的是单个对象
    2.getElementsByTagName()    //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
    3.getElementsByName()       //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
    4.getElementsByClassName()  //通过class名获取元素,返回值是数组n
注意:1.不是所有标签都有name值;2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
高级选择器:
所以为了解决兼容性的问题,在ES5中就新增了选择器:(强大到超乎想象,支持IE8+。ECMAScript借鉴了jQuery选择器的)
    document.querySelectorAll();           //返回一个数组,哪怕只有一个元素
    document.querySelector();              //返回单个元素

关系选择器:(兼容性不好)

 根据父级,选择子级:   oDiv.children;        //返回一个数组

 根据子级,选择父级: oSpan.parentNode;     //返回一个元素


// var omsg = document.querySelector(".msg");      //第一个子
// console.log(omsg.firstElementChild)

// var omsg = document.querySelector(".msg");    // 最后一个子
// console.log(omsg.lastElementChild)

// var omsg = document.querySelector(".msg");     // 上一个兄弟
// console.log(omsg.previousElementSibling)

// var omsg = document.querySelector(".msg");      // 下一个兄弟
// console.log(omsg.nextElementSibling);

二、其他节点选择器:(关系)

 

这里是在HTML中显示的各种其他节点:

<body>
<span>qwe</span>
<div class="box">
<span>1</span>
<p>2</p>
hello
<!-- 这是注释 -->
<em>3</em>
</div><span>zxc</span>
</body>

 

var obox = document.querySelector(".box")          // 父选子   //NodeList(9)注意在这里换行和空格都属于节点,所以显示是显示出box中的所有节点以类数组的形式在控制台中输出;
console.log(obox.childNodes)

var obox = document.querySelector(".box")       // 上一个兄弟  //#text
console.log(obox.previousSibling)

var obox = document.querySelector(".box")       // 下一个兄弟   // <span>zxc<span>
console.log(obox.nextSibling)

// var obox = document.querySelector(".box")    // 第一个子   //#text
// console.log(obox.firstChild)

// var obox = document.querySelector(".box")    // 最后一个子   //#text
// console.log(obox.lastChild)

 

三、节点

根据DOM规定,HTML文档中的每个成分都是一个节点。
    DOM是这样规定的:
        整个文档是一个文档节点
        每个HTML标签是一个元素节点
        包含在HTML元素中的文本是文本节点
        每一个HTML属性是一个属性节点
        注释属于注释节点

 相当于HTML文档中的所有内容都是节点,元素是节点的别称,节点包含元素,当然节点还有好多细化的种类

 如何获取DOM节点:
          对象.parentNode    //获得父元素节点
 
          对象.children      //获得子元素节点的集合,不包含空白节点
                            //但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
          对象.childNodes    //获得所有子节点的集合,包括空白节点
                            //IE7/8不包含空文本节点,但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
    
 如何获取属性节点:
          对象.attributes   //获得所有属性节点,返回一个数组
 
四、DOM属性的基本操作(增/删/改/查)
改变元素的内容(innerHTML),属性(value),样式(width,height,background)
    也就是对DOM进行增删改查。什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等。
可以分为两种,一种叫内置属性,一种叫非内置属性。
内置属性可以直接通过点"."进行操作
tagName               //返回值是当前元素的标签名
innerHTML/innerText  //返回值是当前元素的内容
id                    //返回值是当前元素的ID
title                 //获取title的标签值,这个title是从document中获取的
className             //返回值是当前元素的class
href                  //返回值是当前的href的值
非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点
getAttribute()        //获取 元素的属性
setAttribute()        //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
removeAttribute()     //删除 元素的属性,低版本的IE不兼容
在这里要注意getAttribute()和 对象.attributes 的区分,前者是对元素中属性的获取操作,后者是用来获得对象中所有属性节点的操作,前者是获得所有属性节点,返回一个数组。
 
五、DOM元素的基本操作(增/删/改/查)
查询:选择器;
创建:createElement()  配合  appendChild()    将创建好的元素,插入到某个标签内的最后
 删除:removeChild()  配合  parentNode
           元素.remove()    直接删除当前元素
           document.body.removeChild(div);
修改: outerHTML
    oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"
posted @ 2019-08-27 13:37  托尔带盐人  阅读(1408)  评论(0编辑  收藏  举报