DOM是W3C的标准,分为3个不同的部分:

核心DOM:针对任何结构化文档的标准模型,XML DOM:针对XML文档的标准模型,HTML DOM:针对HTML文档的标准模型。

HTML DOM中所有事物都是节点:

整个文档是文档节点,HTML元素是元素节点,HTML属性是属性节点,HTML内容是文本节点,注释是注释节点。

DOM的一些方法:

方法                                        描述                                                                                    
getElementById() 返回带有指定ID的元素
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点数组,length获取数组长度
getElementsByClassName() 返回包含带有指定类名的所有元素的节点数组,length获取数组长度
appendChild() 加入新节点  parentNode.appendeChild(newNode)
removeChild() 删除指定节点 parentNode.removeChild(theNode)
replaceChild() 替换指定节点 parentNode.replaceChild(newNode,theNode)
insertBefore() 在指定节点前插入新节点 parentNode.insertBefore(newNode,theNode)
createAttribute() 创建属性节点
createElement() 创建元素节点,var para=document.createElement("p");
createTextNode() 创建文本节点
getAttribute() 返回指定的属性值 但是一般这样获取:document.getElementById("p2").style.color
setAttribute() 把指定属性设置或修改为指定的值 node.setAttribute("attribute","value")

DOM的一些属性:

属性  描述
parentNode 返回父节点  xx.parentNode
childNodes[i] 返回第i+1个子节点
attributes[i] 返回第i+1个属性节点
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling          返回下一个兄弟节点
previousSibling 返回上一个兄弟节点
innerHTML 获取元素内容
nodeName 只读,规定节点的名称
  元素节点的nodeName与标签名相同
  属性节点的nodeName与属性名相同
  文本节点的nodeName始终是#text
  文档节点的nodeName始终是#document
nodeValue 规定节点的值
  元素节点的 nodeValue 是 undefined 或 null
  文本节点的 nodeValue 是文本本身
  属性节点的 nodeValue 是属性值
nodeType(返回节点类型,只读) 1:元素,2:属性,3:文本,8:注释,9:文档
onclick document.getElementById("myBtn").onclick=function(){xx()};
document.documentElement 访问全部文档,alert(document.documentElement);
document.body 访问body内容
document.head 访问头部内容

dom小总结的更多相关文章

  1. dom小练习

    dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...

  2. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  3. JS基础(一)dom小实例

    DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...

  4. jquery VS Dom(小实例单选-多选-反选)

    一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...

  5. DOM 小总结

    DOM 是什么 文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树. D: document 当 web 浏览器浏览一个页面的时候,DOM ...

  6. Js操作DOM小练习_01

    1.页面引入jQuery文件和bootstrap文件: 2.贴上代码 <!DOCTYPE html> <html lang="en"> <head&g ...

  7. 《微信小程序七日谈》- 第一天:人生若只如初见

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  8. JavaScript Dom入门

    好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...

  9. DOM节点详解

    @ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 ...

随机推荐

  1. jdk7 HashSet和HashMap源码分析

    先来看看HashMap的一些成员变量以及他们的含义 /** * The default initial capacity - MUST be a power of two. */ static fin ...

  2. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  3. SweetTips: 快意灵动的Android提示库!

    此文章是我在简书的文章,自行搬到博客园.简书地址:SweetTips: 快意灵动的Android提示库! 源码及所在DEMO已上传至GitHub:SweetTips,欢迎大家提Bug,喜欢的话记得St ...

  4. IE8下 Select文字垂直居中的办法

    .select { padding: 4px 0; height: 30px; line-height: 26px; vertical-align: middle;} 处理前: 处理后:

  5. 小谈数据库Char、VarChar、NVarChar差异

    1. char      固定长度,最长n个字符.   2. varchar      最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同)   char和varchar区别:   ...

  6. OpenCV FileStorage 使用记录

    FileStorage OpenCV 中的 FileStorage 类能够读写硬盘中的.xml和.yaml文件,这里我们只讨论对 .xml 的以下几种操作: 写入(FileStorage::WRITE ...

  7. python 小程序(1)

    这是在一个文件夹下将符合条件的文件中,第一列是相同的,对每个文件中第二列的数求和,输出为一个txt文件,文件内容格式为:第一列的每个数对应[这个所有符合条件的文件中第一列这个数对应的第二个数的]求和 ...

  8. Tomcat下log4j设置文件路径和temp目录

    转自:http://www.cnblogs.com/dkblog/archive/2007/07/27/1980873.html 在Web应用中的如何设置日志文件的路径呢?最笨的方法是写绝对路径,但很 ...

  9. cuda8.0 /usr/bin/ld: cannot find -lGL

      /usr/bin/ld: cannot find -lGL collect2: ld returned 1 exit status tennycent@tennycent-desktop:~/$ ...

  10. $(#form :input)与$(#form input)的区别

    相信大家都很奇怪这两者的区别 我从两个方面简单介绍下 1. $("form :input") 返回form中的所有表单对象,包括textarea.select.button等    ...