DOM初探系列(1)

DOM初探

DOM是什么

  • D: document,没有文档就没有DOM
  • O:object,对象,对象是一种独立的数据集合,在javascript中对象分为:用户定义对象,内建对象和宿主对象。
  • M:model,模型,是某种事物的表现形式。

关于object

  • 内建对象包括:
    1. let a = new Array();
    2. let b = new Date();
    3. let c = new Math();
    4. ……
  • 用户自定义对象很好理解,在这里不做赘述
  • 宿主对象:由浏览器提供的对象,如:window对象

一份文档就是一颗节点树

DOM初探系列(1)_第1张图片

元素节点,文本节点,属性节点

<html>
     <head>
     <meta>
     meta>
     <title>shopping listtitle>
     head>
     <body>
     <h1 id=shop>购物清单h1>
     <ul title="必须要买的东西">
     <li>牙膏li>
     <li>酸奶li>
     <li>水果li>
     ul>
     body>
 html>

注意

  • 在这段代码中html,head,body,h1,ul,li标签是元素节点
  • 在这段代码中文本节点的内容为牙膏,酸奶……
  • 在这段代码中title是属性节点
  • 文本节点总是被包含在元素节点内部
  • 属性节点中是在文本节点的头标签内部

getElementById(),getElementsByTagName()

这两个方法是document对象的两个取元素的方法。

  • document.getElementById(“shop”);
  • document.getElementsByTagName(“li”);

注意

  1. document.getElementById(id)返回值是对象,如果不存在则返回null
  2. document.getElementsByTagName(name)返回值是对象数组,如果不存在则返回null

getAttribute(),setAttribute()

  • object.setAttribute(attribute,value);
  • object.getAttribute(attribute);
//object.getAttribute(attribute)用法
let element = document.getElementByTagName("ul");
for(let i = 0; i < element.length;i++){
    let title = element[i].getAttribute("title");
    if(title!=null){
        document.write(title);
    }
}

//object.setAttribute(attribute,value)用法
let id = document.getElementById("shop");
element.setAttribute("id","things");
alert(element.getAttribute("id"));
以上代码均自己手敲,如有问题请指正。

你可能感兴趣的:(DOM)