zoukankan      html  css  js  c++  java
  • js学习笔记——DOM

    DOM在js中充当着很重的角色,DOM是Document Object Model的缩写,即文档对象模型。下面将总结DOM学习要点:

    一、DOM架构内容:

    把文档表示为树:其中根节点就是Document对象;

    1、常见节点类型:

    接口:

    Element:getAttribute()、setAttribute()、removeAttribute()

    Text:

    Document:

    Comment:

    DocumentFragment:

    Attr:

    2、在文档中查找元素:Document对象定义了几个获取文档元素的方法

    (1)getElementsByTagName("标记名") ——标记名可以重复使用,故返回的是一个数组;

    (2)getElementById("标记id属性") ——由于id是唯一的,所以返回的也是唯一元素;

    (3)getElementsByName("标记name属性") ——name属性不唯一,故返回的也是一个数组;

    document.documentElement属性引用了作为文档的根元素的<html>标志;

    document.body属性引用<body>标记,如果body属性不存在,可以如下引用<body>标记:

    document.getElementsByTagName("body")[0];

    getElementsByTagName()方法其实返回的是一个数组,由于html文档只能有一个<body>元素,所以只对返回数组的第一个元素感兴趣;

    可以通过getElementsByTagName()方法获取任何类型的html元素的列表,如:找到文档中所有的表:

    var tables = document.getElementsByTagName("table");

    注意:
    (1)、html文档对大小写不敏感,所以这里的"table"也不分大小写;

    (2)、返回元素的顺序就是他们出现在文档的顺序

    如果想处理文档中的第四个段落,可以写成:

    var myparagraph = document.getElementsByTagName("p")[3];

    还有一种更有效的方法是给每个元素一个id,这样就可以通过getElementById()方法来获取:如:
    在段落中表记id:

    <p id="paragraph">

    就可以通过以下获取:

    var myparagraph = document.getElementById("paragraph");

    3、修改文档:DOM核心API的真正威力在于它能用js动态修改文档的特性
    (1)修改文档的内容:重新排序、把文档内容转换为大写等;

    (2)修改属性:调用element.setAttribute()方法

    如:修改元素的css样式

    var headline = document.getElementById("headline");
    headline.setAttribute("align","center");
  • 相关阅读:
    Merge Intervals
    Merge k Sorted Lists
    Sqrt(x)
    First Missing Positive
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Distinct Subsequences
    Reverse Nodes in k-Group
    Jump Game II
    Jump Game
  • 原文地址:https://www.cnblogs.com/zhangchunxi/p/2982853.html
Copyright © 2011-2022 走看看