Day 55 前端学习笔记：DOM 对象（上）

Part 1：什么是 DOM

　　HTML  Document Object Model（文档对象模型）

　　HTML DOM 定义了访问和操作HTML文档的标准方法

　　HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

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

Part 2: DOM节点

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

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

 

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

Part 3: 节点关系

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

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

　　访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

　　document.getElementById(“idname”)

　　document.getElementsByTagName(“tagname”)

　　document.getElementsByName(“name”)
　　document.getElementsByClassName(“name”)
parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

 Part 4: onclick 与 this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p1">hello</p>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
<script>
    var eles_li=document.getElementsByTagName("li");
    for(i=0;i<eles_li.length;i++) {
        eles_li[i].onclick = function () {
            alert(this.innerText)  //  注意这里的this代指onlick时选中的对象，并且不能被eles_li[i]所取代，因为此时的i永远为3
        }
    }
        
</script>
</html>

 

posted @ 2017-11-10 14:53  折翼的壕哥  阅读(45)  评论(0)    收藏  举报