JavaScript笔记:DOM基础
一、什么是DOM
DOM全称是document object model(文档对象模型)。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。通俗的说DOM其实就是针对HTML和XML文档的一个API接口,用于操作HTML/XML。
- 核心 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>
在上面这段代码中,我们很容易看出:
- ul为li的父结点(parentNode)
- li为ul的子结点(childNodes)
- 各个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基础的更多相关文章
- 从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
- Javascript DOM 编程艺术(第二版)读书笔记——DOM基础
1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父) child(子) sibling(兄弟) ...
- js笔记-DOM基础
DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNo ...
- JavaScript笔记——DOM的操作
节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在什么 ...
- JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...
目录(代码编写): 显示数据 语法 变量 & 变量类型 对象 函数 事件 字符串 运算符 条件语句 循环语句 Break 和 Continue 使用 JS 近两年,现整理下一些基本: HTML ...
- JavaScript之DOM基础
概述 DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准.文档对象模 ...
- javascript中DOM基础知识介绍
1.1. 基本概念 1.1.1. DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...
- javascript笔记---算法基础学习
- JavaScript DOM基础总结
上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...
随机推荐
- 【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 ...
- 实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)
1:鼠标移入移出显示另一张图片 var yuanquan_1 = document.getElementById("yuanquan_1" ); yuanquan_1. onmo ...
- 用javascript判断一个html元素是否存在的五种方法:
1. 判断表单元素是否存在(一) if("periodPerMonth" in document.theForm){ return true; }else{ return fals ...
- .Net 的一些插件
1)Webmatrix WebMatrix是一个Microsoft提供的免费的Web开发工具,包括你开发网站所需要的一切.从开源Web应用.内置网页模板开始或者完全自己编写代码.它全面而且简单,最重要 ...
- 自定义EditText实现可以一键删除输入的内容
public class MyEditText extends EditText { private Drawable dRight; private Rect rRounds; public MyE ...
- oracle数据本机自动备份
1.创建三个文件 exp.list 内容:oracle数据库的用户名和密码 name pwd exp.log 主要用于存储在自动备份数据库时的日志信息 exp.sh #!/bin/sh #找到数 ...
- 解析HTTP协议六种请求方法,get,head,put,delete,post有什么区别
GET: 请求指定的页面信息,并返回实体主体.HEAD: 只请求页面的首部.POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体.PUT: 从客户端向服务器传送的数据取代指定的文档 ...
- [原创]cocos2d-x研习录-第二阶 基本概念
在Cocos2D-x引擎中,有几个非常重要的概念:导演(CCDirector).摄像机(CCCamera).场景(CCSecen).布景(CCLayer).精灵(CCSPrite)和动作(CCActi ...
- python集成开发工具
1. IDLE http://python.org/idle/ (在 Python 发行版中自带) 2 BlackAdder 3 PythonWorks 4 Wing IDE http://wingw ...
- 【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL
IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...