JsGallery-basis-1

Posted on | In | Visitors:

示例代码在这里

DOM

一份文档就是一棵节点树。每个节点都是一个对象

节点分类：

  • 元素节点 element node
  • 文本节点 text node
  • 属性节点 attribute node

获取元素：

有三种DOM方法可以获取元素

  • getElementById：
    • 通过元素ID；
    • 返回有着给定id属性值的节点对应的对象
    • document 对象特有的函数；
1
document.getElementById("imagegallery")
  • getElementsByTagName：
    • 通过标签名；
    • 返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素；
1
2
imagegallery.getElementsByTagName("li") 
document.getElementsByTagName("*")
  • getElementsByClassName：
    • 通过类名；
    • 返回一个具有相同类名的元素的数组；
    • 还可以查找带有多个类名的元素，在字符串参数中用空格分隔类名；
1
2
3
4
shopping.getElementsByClassName("important sale")，
// 匹配同时带有important和sale类名的元素.
// 类名顺序不重要，实际带有更多类名也没关系；

获取和设置属性

  • getAttribute：
    • 此方法不属于document对象，不能通过document对象调用；
1
object.getAttribute("title")
  • setAttribute：
    • 与getAttribute一样，也只能用于元素节点；
    • 通过 setAttribute 对文档修改后，通过浏览器的 view source 查看文档源代码时看到的仍是修改前的属性值。源于DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。
1
shopping.setAttribute("title", "a list of goods")

应用js函数

事件处理函数

添加事件处理函数的语法：

1
event = "Javascript statememt(s)"

eg：

1
2
3
onclick = "showPic(this); return false;"
// 增加return false，防止用户被带到目标链接窗口

childNodes 属性

  • 一个包含某元素全部子元素的数组；
  • 获取节点的childNodes属性：
1
element.childNodes
  • 访问childNodes数组的第一个和最后一个元素：
1
2
3
4
# -*- coding: utf-8 -*-
node.firstChild    // 与node.childNodes[0]等价
node.lastChild    //  与node.childNodes[node.childNodes.length-1]等价

eg：在页面加载时显示 body元素的子元素的总个数

1
2
3
4
5
6
# -*- coding: utf-8 -*-
function countBodyChildren(){
    var body_element = document.getElementByTagName("body")[0];
    // 每份文档只有一个body元素，故其是返回数组的第一个（也是唯一一个）元素；
    alert (body_element.childNodes.length);
}

nodeType属性

  • 返回值是一个数字；

    • 元素节点的nodeType属性值：1；

    • 属性节点的nodeType属性值：2；

    • 文本节点的nodeType属性值：3；

  • 获取节点的nodeType属性：

1
node.nodeType

nodeValue属性

  • 用来得到和设置一个节点的值；

  • eg：刷新 id等于 description 的 p 元素：

1
2
3
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;