一、什么是DOM

DOM全称是document object model(文档对象模型)。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。通俗的说DOM其实就是针对HTML和XML文档的一个API接口,用于操作HTML/XML。

W3C DOM 标准被分为 3 个不同的部分:
  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

二、DOM节点

注意:DOM树的根统一为文档根—document),DOM既然是树状结构,那么他们自然有如下的几种关系:

  • 根结点(document)
  • 父结点(parentNode)
  • 子结点(childNodes)
  • 兄弟结点(sibling)

为了更好的理解各种节点,我们来构造一个简单的页面结构,如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在上面这段代码中,我们很容易看出:

  1. ul为li的父结点(parentNode)
  2. li为ul的子结点(childNodes)
  3. 各个li为其他li的兄弟结点(sibling)

三、常见节点类型

1、DOCUMENT_NODE 

(document)文档根结点类型,该枚举型的值是9.

2、ELEMENT_NODE 

(element)元素结点类型,该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。

3、TEXT_NODE (text)文本结点类型,该枚举型的值是3。 (注:一个空格也就可能是一个文本结点) 

四、DOM操作

1.创建元素

 document.createElement()

使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。


为了理解document.createElement的用法,我们创建一个简单的网页,当我们在文本框输入内容之后,点击按钮创建节点的按钮的时候会创建一个li
并把文本框的内容赋给li
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                oLi.innerHTML=otext.value;
            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>

    </ul>
</body>
</html>

运行程序我们会发现,新创建的元素并不会自动添加到文档树中,要添加到文档树,还需要结合appendChild()、insertBefore()、replaceChild()进行操作(后面会讲到)

2.插入元素

 appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点,并且返回这个新增的节点。如果传入到appendChild()里的节点已经是文档的一部分了,那结果就是将节点从原来的位置转移到新位置,任何一个节点不能同时出现在文档中的多个位置。

如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                oLi.innerHTML=otext.value;
                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>

    </ul>
</body>
</html>

运行程序我们会发现,当点击创建节点后,会往ul里面添加一个li,而且每次都是在li的后面添加

insetBefore(newItem,existingItem)

insetBefore()可以将节点插入到某个特定的位置。这个方法接受两个参数:要插入的节点和作为参照的节点。
插入节点后,被插入的节点变成参照节点的前一个同胞节点,同时被方法返回。 如果参照节点是null,则与appendChild()执行相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                var aLi=document.getElementsByTagName('li');
                oLi.innerHTML=otext.value;
                oUl.insertBefore(oLi,aLi[]);

            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>
        <li></li>
    </ul>
</body>
</html>

注意:如果ul里面原本是没有节点的 则需要做判断,然后再插入,如下代码

    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                var aLi=document.getElementsByTagName('li');
                oLi.innerHTML=otext.value;
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    oUl.appendChild(oLi);
                }

            }
        }
    </script>

3、删除结点

removeChild()

该方法移除节点,接受一个参数,即要移除的节点,同时该方法返回被移除的节点。只能是一个节点,不能是一组节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var aA=document.getElementsByTagName('a');
            var oUl=document.getElementById('ul1');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    oUl.removeChild(this.parentNode);
                }
            }
        }
    </script>
</head>
<body>
    <ul id='ul1'>
        <li>2222 <a href="#">删除</a></li>
        <li>333 <a href="#">删除</a></li>
        <li>4444<a href="#">删除</a></li>
        <li>45555<a href="#">删除</a></li>
    </ul>
</body>
</html>

 暂时就这么多,如果有补充,后面再更新。。。。。。。。。。。。。。。。。。

JavaScript笔记:DOM基础的更多相关文章

  1. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  2. Javascript DOM 编程艺术(第二版)读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  3. js笔记-DOM基础

    DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNo ...

  4. JavaScript笔记——DOM的操作

    节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在什么 ...

  5. JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...

    目录(代码编写): 显示数据 语法 变量 & 变量类型 对象 函数 事件 字符串 运算符 条件语句 循环语句 Break 和 Continue 使用 JS 近两年,现整理下一些基本: HTML ...

  6. JavaScript之DOM基础

    概述 DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准.文档对象模 ...

  7. javascript中DOM基础知识介绍

    1.1.     基本概念 1.1.1.      DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...

  8. javascript笔记---算法基础学习

  9. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

随机推荐

  1. 【LeetCode OJ】Convert Sorted List to Binary Search Tree

    Problem Link: http://oj.leetcode.com/problems/convert-sorted-list-to-binary-search-tree/ We design a ...

  2. 实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)

    1:鼠标移入移出显示另一张图片 var yuanquan_1 = document.getElementById("yuanquan_1" );  yuanquan_1. onmo ...

  3. 用javascript判断一个html元素是否存在的五种方法:

    1. 判断表单元素是否存在(一) if("periodPerMonth" in document.theForm){ return true; }else{ return fals ...

  4. .Net 的一些插件

    1)Webmatrix WebMatrix是一个Microsoft提供的免费的Web开发工具,包括你开发网站所需要的一切.从开源Web应用.内置网页模板开始或者完全自己编写代码.它全面而且简单,最重要 ...

  5. 自定义EditText实现可以一键删除输入的内容

    public class MyEditText extends EditText { private Drawable dRight; private Rect rRounds; public MyE ...

  6. oracle数据本机自动备份

    1.创建三个文件 exp.list  内容:oracle数据库的用户名和密码 name pwd exp.log   主要用于存储在自动备份数据库时的日志信息 exp.sh #!/bin/sh #找到数 ...

  7. 解析HTTP协议六种请求方法,get,head,put,delete,post有什么区别

    GET: 请求指定的页面信息,并返回实体主体.HEAD: 只请求页面的首部.POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体.PUT: 从客户端向服务器传送的数据取代指定的文档 ...

  8. [原创]cocos2d-x研习录-第二阶 基本概念

    在Cocos2D-x引擎中,有几个非常重要的概念:导演(CCDirector).摄像机(CCCamera).场景(CCSecen).布景(CCLayer).精灵(CCSPrite)和动作(CCActi ...

  9. python集成开发工具

    1. IDLE http://python.org/idle/ (在 Python 发行版中自带) 2 BlackAdder 3 PythonWorks 4 Wing IDE http://wingw ...

  10. 【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL

    IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...