JavaScript（JS）之Javascript对象DOM（三）

https://www.cnblogs.com/haiyan123/p/7598320.html

一、什么是HTML DOM

HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

二、DOM树

JavaScript（JS）之Javascript对象DOM（三）

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

三、DOM节点

1.节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
   整个文档是一个文档节点
   每个 HTML 标签是一个元素节点
   包含在 HTML 元素中的文本是文本节点
   每一个 HTML 属性是一个属性节点

JavaScript（JS）之Javascript对象DOM（三）

其中，document与element节点是重点。

2.节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的孩子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

JavaScript（JS）之Javascript对象DOM（三）

3.节点查找

有两种方式：

　　方式一：直接查找节点（这是一个查找方法）

/     节点查找(节点也就是一个个的标签)
        document.getElementById('idname');//按照id查找，拿到的是一个标签对象
        document.getElementsByClassName('classname');//按照class标签去找，得到的是一个数组里存放的标签
        document.getElementsByTagName('tagname');//通过标签名去找，拿到的也是一个数组
        var a = document.getElementsByName('yuan'); //按照name属性去找,拿到的也是一个数组
        console.log(a);

// /    ==2.========================
    var ele = document.getElementById('div1');
    console.log(ele.length);//返回undified

    var ele2 = document.getElementById('div3');
    console.log(ele2.length);//返回undified

    var ele3 = document.getElementsByClassName('div2');
    console.log(ele3.length); //返回1

    var ele4 = document.getElementsByTagName('p');
    console.log(ele4.length) ;//返回1

    var ele5 = document.getElementsByName('haiyan');
    console.log(ele5.length); //返回1

//====3.=============================
id和name的不支持
   var div1=document.getElementById("div1");

////支持;
   var ele= div1.getElementsByTagName("p");
   alert(ele.length);
////支持
   var ele2=div1.getElementsByClassName("div2");
   alert(ele2.length);
////不支持
   var ele3=div1.getElementById("div3");
   alert(ele3.length);
////不支持
   var ele4=div1.getElementsByName("yuan");
   alert(ele4.length)

length属性