Javascript DOM2021-05-26

Javascript Dom

3.1 文档：DOM中的D

概念：document 它把你编写的网页文档 转换为一个文档对象。

3.2 对象：DOM中的 O

概念：object

• 用户定义对象(user-defined object)：自行创建的

• 内建对象(native object)：内建在JavaScript语言里的对象，如 Array、Math和Date等

• 宿主对象(host object)：由浏览器提供的对象

3.3 模型：DOM中的M

概念：Model map

3.4 节点：node

概念：表示网络中的一个连接点。 DOM，文档是由节点构成的集合

3.4.1 元素节点

元素标签 h p 等

3.4.2 文本节点

包含在元素标签的内部

3.4.3 属性节点

如 id或 class属性

3.4.4 获取元素

有三种 DOM 获取元素节点：ID、标签名字、类名

• getElementById： 通过Id 返回该id元素节点 对应的 对象 document.getElementById(id); alert(typeof document .getElementById('id')) 返回一个类型

• getElementsByTagName 通过标签 返回一个 对象数组 document.getElementsByTagName('tag'); alert(document.getElementsByTagName("li").length) 可以for循环遍历 for(var i = 0;i<document.getElementsByTagName("li").length;i++){ alert(typeof document.getElementsByTagName("li")[i]) } 可以 items = document.getElementsByTagName("li") 减少代码 //如果想知道id属性元素包含 多少 列表项，需具体对象调用 var shopping = document.getElementById("id"); var items = shopping.getElementsByTagName("li")

• getElementSByClassName 通过Class 返回具有相同类名 的元素 的数组 多个类名用空格 隔开 document.getElementSByClassName("important sale".length) //可以自己写一个函数 实现getElementsByClassName

    function getElementsByClassName(Node,Classname){
      if(node.getElementsByClassName){
        return node.getElementsByClassName(Classname)
      }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0;i<elems.length;i++){
          if(elems[i].ClassName.indexOf(classname)!=-1){
            results[results.length]= elems[i];
          }
        }
        return results;
      }
    }

3.4.5 知识点梳理

 

3.5 获取和设置属性

3.5.1 getAttribute

通过对象 调用 参数为 你想查询 属性的 名字

  var paras = document.getElementsByTagName("p")
  alert(paras[i].getAttribute("title")) 

3.5.2 setAttribute

对节点属性 做 修改 object.setAttribute(attribute,valu);

shopping.setAttribute("title","a list of goods") 

四 图片库

当图片过多时 加载太慢 所以 创建图片库的浏览链接

4.1 标记

用序列清单元素来标记图片链接

 

占位符

：通过添加

<img id = "placeholder" src="images/placeholder.gif" alt="my image gallery"

4.2 JavaScript

为了把占位符 替换为想要查看的图片 需要改变 src属性。通过 setAttribute 参数为图片链接

whichpic 代表一个元素节点  具体点就是 指向某个图片的<a>
function showPic (whichpic){
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder")
  placeholder.setAttribute("src",source);
}

4.2.1 非DOM解决方案

如想修改 某个 input 元素的 value 属性 element.value = "the new value" 等价于 element.setAttribute("value,the new value")

4.3 应用这个函数

• 把函数 保存在 .js 文件中

• 引用 js 文件 《script type = "text/javascript" src = "script/showPic.js"></script》

• 添加事件 处理函数 (javascript 内嵌时 用 双引号 包含 用 ；隔开) “onclick = "showPic(this) ；return false" this 表示这个 《a》元素节点 return false 防止跳转 下一个窗口