之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,《JavaScript DOM编程艺术》,就是他了,也看了好几遍了,做一点阶段性的总结吧!由于完全是基础知识,也就完全总结基础知识相关的吧!

DOM选取元素:

document.getElementById            通过id选取元素

document.getELmentsByTagName      通过标签名选取元素

document.getElementsByName       通过元素属性name获取元素

document.getElementsByClassName     通过className获取元素,html5新增

这几个选择元素的方法也确实没什么好说的,基本上写过原生js的,应该都用过

document.querySelector(css)       获取文档中匹配指定 CSS 选择器的一个元素

document.querySelectorAll(css)       返回文档中匹配的CSS选择器的所有元素节点列表

这两个方法也是html5新增,参数css选择器,可以是任意一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

DOM元素节点属性

elem.childNodes             元素elem的所有子元素,包括文本节点,元素节点,甚至注释节点

elem.parentNode              元素elem的父节点,为元素节点

elem.nextSibling             元素elem之后紧跟的节点(处于同一树层级中)
elem.previousSibling           元素elem之前的节点(处于同一树层级中) 

elem.firstChild              元素elem第一个子节点

elem.lastChild              元素elem最后一个子节点

document.createElement()       创建一个元素节点,元素名称为所传入的参数

document.createTextNode()       创建一个文本节点,文本内容以参数传入

document.createDocumentFragment()   创建空的 DocumentFragment 对象,并返回此对象。 

elem.appendChild(node)           在元素elem内部追加子节点node  

elem.insertBefore(newElem, targetElem)   在elem元素内部的targetElem元素前面添加新的元素newElem

elem.getAttribute(attr)           获取elem元素的属性attr

elem.setAttribute(attr, 'attr')        设置elem元素的属性attr为attr

以上,应该为DOM常用的一些属性和方法了。一直觉得DOM内容很多,突然发现,常用的也就那么些,就纯粹当做一个笔记吧!

        

DOM常用的属性和方法的更多相关文章

  1. dom对象常用的属性和方法有哪些?

    dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...

  2. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  3. HTML DOM对象的属性和方法介绍(原生JS方法)

    HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...

  4. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  5. FileStream常用的属性和方法:

    对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanW ...

  6. FileStream常用的属性和方法 (转)

    对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanW ...

  7. FileStream 常用的属性和方法

    FileStream常用的属性和方法 (转) 对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取, ...

  8. JavaScript常用全局属性与方法

    最近,在学习JavaScript,Java作域链包含全局,记录下常用的全局属性与方法,就当是知识的积累,未列出全部,如需查看全部可参考JS相关的API文档. 常用的全局属性:  全局属性      作 ...

  9. js Dom对象的属性与方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

随机推荐

  1. SQL 中的 IFNULL和NULLIF

    sql 中的IFNULL和NULLIF很容易混淆,在此记录一下. IFNULL IFNULL(expression1, expression2) 如果expression1为null, 在函数返回ex ...

  2. 自然语言处理工具hanlp自定义词汇添加图解

    过程分析 1.添加新词需要确定无缓存文件,否则无法使用成功,因为词典会优先加载缓存文件 2.再确认缓存文件不在时,打开本地词典按照格式添加自定义词汇. 3.调用分词函数重新生成缓存文件,这时会报一个找 ...

  3. ML: 聚类算法R包-层次聚类

    层次聚类 stats::hclust stats::dist    R使用dist()函数来计算距离,Usage: dist(x, method = "euclidean", di ...

  4. 【python】序列化和反序列化

    序列化可以理解为:把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式字符串解码为python数据对象.在python的标准库中,专门提供了json库与pickle库 ...

  5. iCheck .js各种各样的插件 fuck Javascript

    http://www.bootcss.com/p/icheck/ 1.先看下网上下载的demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  6. Maven 之多模块构建

    项目的打包类型:pom.jar.war 项目中一般使用maven进行模块管理,每个模块下对应都有一个pom文件,pom文件中维护了各模块之间的依赖和继承关系.项目模块化可以将通用的部分抽离出来,方便重 ...

  7. Gradle详细解析***

    前言 对于Android工程师来说编译/打包等问题立即就成痛点了.一个APP有多个版本,Release版.Debug版.Test版.甚至针对不同APP Store都有不同的版本.在以前ROM的环境下, ...

  8. VS正则msdn地址

    https://msdn.microsoft.com/zh-cn/library/2k3te2cs(v=vs.100).aspx 备查.vs里正则有很多特殊的规则.

  9. ckeditor_4.5.10_full,ckfinder_aspnet_2.6.2,插件使用

    1.ckfinder文件上传的权限: public override bool CheckAuthentication() { // WARNING : DO NOT simply return &q ...

  10. Python单元测试框架之pytest 2 -- 生成测试报告

    From: https://www.cnblogs.com/fnng/p/4768239.html Python单元测试框架之pytest -- 生成测试报告 2015-08-29 00:40 by ...