JavaScript学习笔记——DOM

本文链接：https://blog.csdn.net/csdn1125550225/article/details/70920576

JavaScript学习笔记4——DOM

JavaScript学习1——3参考谷哥的小弟博客[http://blog.csdn.net/lfdfhl?viewmode=contents][6]：

摘自《javascript dom编程艺术》第2版，学习笔记仅供学习交流

节点的概念
5个常用的DOM方法：getElementByID、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute

文档：DOM中“D”

如果没有document(文档)，DOM也就无从谈起。当创建了一个网页，并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。

对象：DOM中的“O”

JavaScript语言的对象可以分为三种类型。

用户自定义对象（user-defined object）：由程序员自行创建的对象。
内建对象(native object)：内建在JavaScript语音里的对象，如Array、Math、和Date等。
宿主对象（host object）:由浏览器提供的对象。
即使是在JavaScript的最初版本里，对编写脚本来说非常重要的一些宿主对象就已经可用了，它们当中最基础的对象是window对象。
window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型），但我觉得称为Window Object Model(窗口对象模型)更为贴切。BOM提供了window.open和window.blur等方法，这些方法某种程度上要为到处被滥用的各种弹出窗口和下拉菜单负责。
我们不需要与BOM打太多交道，把注意力集中在浏览器窗口内容的网页内容上。document对象的主要功能就是处理网页功能，了解它就足够了。

模型：DOM中的”M“

![这里写图片描述](https://img-blog.csdn.net/20170428135746752?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3NkbjExMjU1NTAyMjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
模型层类似Android View  ViewGroup,不做过多解释
根元素html：html代表整个文档

节点

可以把一个html文档想成，节点树，组成节点树的就是节点

元素节点（element node）

元素例如：<body>、<p>、<ul>
标签的名字就是元素的名字：文本段落元素的名字是"p"
元素可以包含其他元素（<html> 是根元素，唯一没有被包含在其他元素里的元素）

文本节点

例如 P标签里面的内容（”Dont’t forget to buy this stuff”）就是文本节点。
不是所有的元素节点都包含文本节点如ul

属性节点

 在DOM中，上图p标签里 title="a gentle reminder" 就是一个属性节点

CSS

请参考谷哥小弟博客
[http://blog.csdn.net/lfdfhl?viewmode=contents][6]

获取元素

有3种DOM方法可以获取元素节点，分别是

1.元素id
document. getElementById(“id123ABC”);此方法返回一个document对象里独一无二的元素对象，元素id值是 id123ABC,可以使用typeof 判断值是字符串、数值、函数、布尔值、还是对象。
文档中每个元素都是一个对象。利用DOM提供的方法能得到任何一个对象，包括没有id属性的对象（一般不必每个元素都定义一个独一无二的id）
2.标签名字
document.getElementsByTagName(“li”);返回一个数组，html标签中有多少li标签就返回多少li标签对象。
document.getElementsByTagName(“*”); 返回html文档里总共有多少个元素节点。

var shopping=document.getElementById(“purchases”);返回id为”purchases” 元素对象
var items=shopping.getElementsByTagName(“li”); 或”*” 返回shopping元素对象里所有的”li”元素，或所有元素
3.类名
getElementsByClassName(“sale”); 返回class 属性包含（class=”sale” ）sale的元素对象。
getElementsByClassName(“sale1 sale”);返回class属性包含 sale和sale1的元素对象（用空格分隔类名，顺序随意，包含即可）
var shopping=document.getElementById(“purchases”);
var sales=shopping.getElementsByClassName(“sale”)）
返回所有 id为”purchases” 元素对象里 “sale” 元素对象
（sales是数组）
getElementsByClassName方法只有较新的浏览器才支持它。为了弥补这一点需要自己实现新老浏览器都能用的getElementsByClassName

function getElementsByClassName(node,classname){
            if(node.getElementsByClassName()){
                return  node.getElementsByClassName();
            }else{
                var results=new Array();
                var elems=node.getElementsByTagName("*");
                for(var i=0;i<elems.length;i++){
                    //indexOf 不包含返回-1  区分大小写
                    if(elems[i].className.indexOf(classname)!=-1){
                        results[results.length]=elems[i];
                    }
                }
                return results;
            }
        }

是时候展现真正的技术了
var shopping=document.getElementById(“purchases”);
var sales=getElementsByClassName( shopping，”sale”)）;

盘点知识点

一份文档就是一颗节点树
节点分为不同的类型：元素节点，属性节点和文本节点等。
getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点。
getElementByTagName和getElementByclassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。
每个节点都是一个对象。

获取和设置属性

getAttribute

getAttribute是一个函数，只有一个参数——查询的属性的名字：
object.getAttribute(attribute);
getAttribute不属于document对象，不能通过document对象调用。它只能通过元素节点对象调用。可以与getElementsByTagName方法合用，获取每个p元素的title属性

var paras=document.getElementsByTagName("p");
        for(var i=0;i<paras.length;i++){
            var titleText=paras[i].getAttribute("title");
            //if(titleText)   等于  if(titleText!=null){

//                                  }
            if(titleText)alert(titleText);
        }

如果p标签没有title属性返回null 含义“没有值”。

setAttribute

setAttribute 和getAttribute基本一样，只能用于元素节点，可以设置元素节点属性

var paras=document.getElementsByTagName("p");
        for(var i=0;i<paras.length;i++){
            var titleText=paras[i].getAttribute("title");
            //if(titleText)   等于  if(titleText!=null){
//                                  }
            if(titleText)alert(titleText);
            paras[i].setAttribute("title",titleText+","+i);
            if(titleText)alert(titleText);
        }

小节

介绍了DOM提供的五个方法：
- getElementByID
- getElementByTagName
- getElementByClassName
- getAttribute
- setAttribute
DOM还提供了nodeName nodeValue childNodes nextSibling和parentNode 用到的时候再详细介绍