DOM(Document Object Model:文档对象模型)为javascript中的一部分,它为访问和修改html文档或xml文档提供了一些编程接口,DOM以对象的形式来描述文档中的内容,以树形结构来管理这些对象,并提供了一些方法来得到这些对象并对其进行修改。

  获取元素对象方法:

    1.document.getElementById() :返回对拥有指定 id 的第一个对象的引用。

    2.document.getElementsByName():返回带有指定 名称 的对象集合。

    3.document.getElementsByTagName():返回带有指定 标签名 的对象集合。

  上述三个方法是经常用到的获取Element 元素对象 的方法,DOM由节点组成,而所有节点都需要获取元素对象后用DOM提供的特定方法获取,因此这些方法是使用DOM进行编程的入口,在DOM中每个东西都是 节点:

  • 文档本身就是一个文档对象
  • 所有 HTML 元素都是元素节点
  • 所有 HTML 属性都是属性节点
  • 插入到 HTML 元素文本是文本节点
  • 注释是注释节点

  获得节点方法:

    1.element.getAttributeNode():获得该节点的属性节点。

    2.element.firstChild:获得该节点第一个子节点。

    3.element.lastChild:获得该节点的最后一个子节点。

    3.element.parentNode():获得该节点的父节点。

    4.element.childNodes():返回该节点的子节点数组(由于空格也会被当做文本节点被返回。所以该方法常用element.getElementsByTagName()代替)。

    5.element.nextSibling:返回该节点的下一个兄弟节点。
    6.element.previousSibling:返回该节点的上一个兄弟节点。

  节点常用属性:

    1.element.nodeName:其内容是给定节点的名字。
       如果是元素节点,nodeName返回这个元素的名称(标签名)。
       如果是属性节点,nodeName返回这个属性的名称(属性名)。
       如果是文本节点,nodeName返回一个内容为#text 的字符串。
    2.element.nodeType:返回一个整数,这个数值代表着给定节点的类型。
      Node.ELEMENT_NODE     ---1    -- 元素节点
      Node.ATTRIBUTE_NODE  ---2    -- 属性节点
      Node.TEXT_NODE             ---3    -- 文本节点
    3.element.nodeValue:返回给定节点的当前值(字符串)。
      如果给定节点是一个属性节点,返回值是这个属性的值。
      如果给定节点是一个文本节点,返回值是这个文本节点内容。  
      如果给定节点是一个元素节点,返回值是 null。
   操作节点常用方法:
    1.element.appendChild():在该节点所有子节点的最后加入一个子节点。
    2.element.insertBefore(new,old):在该节点的指定子节点前加入一个子节点。
    3.element.removeChild():删除该节点的指定子节点。
    4.element.replaceChild(new,old):替换该节点的指定子节点。
    5.element.cloneNode(boolean):复制指定节点并返回,参数为true时复制子节点,默认为false。
  innerHTML属性不是W3C推荐标准,但由于其操作的方便性,大多数主流浏览器都支持这个属性,通过此属性可以很方便的获取或写入元素的文本信息,可以调用该属性直接获得元素的文本内容,也可以通过赋值字符串的方式将指定的HTML文本写入调用该属性的元素。

DOM常用方法总结的更多相关文章

  1. javascript学习总结(二):DOM常用方法。

    1 获取元素节点 a document.getElementById(id),它返回一个对象.是Document对象特有的函数,它还有这些方法: b element.getElementsByTagN ...

  2. javascript DOM 常用方法

    前端HTML+CSS+JS流程导图:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c HTML+CSS+Javascript+j ...

  3. DOM方法

    DOM常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组 ...

  4. html dom模型一

    DOM 节点 包含的节点内容: 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 ...

  5. DOM操作和样式操作库的封装

    一.DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性,由于不是介绍DOM的基础内容,所以就不一一详细说明各个方法和属性了(学习DOM的封装的,一般都对基础DOM比较熟悉了). 1.1 ...

  6. HTML中DOM核心知识有哪些(带实例超详解)

    HTML中DOM核心知识有哪些(带实例超详解) 一.总结: 1.先取html元素,然后再对他进行操作,取的话可以getElementById等 2.操作的话,可以是innerHtml,value等等 ...

  7. DOM 小总结

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

  8. js主要知识轮廓笔记

    一.js中的基础类型和引用类型: 基础类型:1.Number2.String3.Boolean4.Undefined5.Null 引用类型(内置对象):1.Object类型2.Array类型3.Dat ...

  9. JavaScript 知识点

    JS基础 页面由三部分组成: html:超文本标记语言,负责页面结构 css:层叠样式表,负责页面样式 js:轻量级的脚本语言,负责页面的动效和数据交互 小总结:结构,样式和行为,三者相分离 在htm ...

随机推荐

  1. HTML5 图片本地压缩上传插件「localResizeIMG」

    移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...

  2. 关于a标签自身的click事件所带来的一些影响

    众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...

  3. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  4. 《转载》跟我学spring3

    一.<跟我学spring3>电子书下载地址: <跟我学spring3>  (1-7 和 8-13) http://jinnianshilongnian.iteye.com/bl ...

  5. linux系统的初化始配置(包括网络,主机名,关闭firewalld与selinux)

    每次我们使用Linux都会对系统进行初始化的配置,下面我们一一列出来. 1.服务的开启 systemctl enable firewalld.service //将指定的服务设置为开机启动 syste ...

  6. ListView只更新某个item

    方案1:针对需要更新的item调用public View getView(int position, View convertView, ViewGroup parent)即可.如: public c ...

  7. fibonacci数列(五种)

    自己没动脑子,大部分内容转自:http://www.jb51.net/article/37286.htm 斐波拉契数列,看起来好像谁都会写,不过它写的方式却有好多种,不管用不用的上,先留下来再说. 1 ...

  8. caffe机器学习自带图片分类器classify.py实现输出预测结果的概率及caffe的web_demo例子运行实例

    caffe机器学习环境搭建及python接口编译参见我的上一篇博客:机器学习caffe环境搭建--redhat7.1和caffe的python接口编译 1.运行caffe图片分类器python接口 还 ...

  9. Java页面中文编码要转换两次encodeURI

    1.js文件中使用encodeURI()方法. login_name = encodeURI(encodeURI(login_name)); 2.action中URLDecoder解码 loginNa ...

  10. 基于SSM的租赁管理系统0.1_20161225_项目需求

    基于SSM的汽车租赁系统项目计划书 1.产品定位 本系统供提供租赁服务的企业内部使用,供企业员工进行线下操作. 2.需求分析 2.1 能为工作人员提供员工信息的管理功能,具有RBAC基于角色的权限管理 ...