之前一直傻傻分不清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. npm 切换淘宝源

    由于Node官方模块仓库太慢,建议将模块仓库切换到阿里源 C:\workspace\angular>npm config set registry https://registry.npm.ta ...

  2. Hystrix 详细说明

    在 Hystrix 入门中,使用 Hystrix 时创建命令并给予执行,实际上 Hystrix 有一套较为复杂的执行逻辑,简单来说明以下运作流程: 在命令开始执行时,会做一些准备工作,例如为命令创建响 ...

  3. Spring Cloud(Dalston.SR5)--Eureka 注册中心高可用-服务提供和消费

    由于 Eureka 注册中心只是在内存中保存服务注册实例,并且没有将服务注册实例进行同步,因此我们需要对服务提供和消费进行调整,需要指定服务提供和消费的注册.服务发现的具体Eureka 注册中心配置, ...

  4. linux进程监控和简单的重启&服务的创建 参考自http://blog.csdn.net/lockheed_hong/article/details/73549837

    脚本文件 该脚本实现了一个检测进程是否存在,不存在的情况下重启进程并且记录日志. #! /bin/sh proc_name="console/queue/gift.php" # 进 ...

  5. 线程【五】VCL下的线程类

    在这里把网友常常搞不清楚的属性作用列出来: 一.FreeOnTerminate用于表明线程执行完毕后是自动释放还是保留,默认为False 二.Terminate 该过程只是简单地设置线程类的Termi ...

  6. 黄聪:Android酷炫实用的开源框架(UI框架)(转)

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  7. IDEA运行tomcat8.5.35源代码

    前提环境,安装和配置好java1.8+环境,maven,IDEA 1.下载Tomcat源代码:https://tomcat.apache.org/download-80.cgi#8.5.35 2.创建 ...

  8. [转]jvm加载类规则

    jvm包括三种类加载器: 第一种:bootstrap classloader:加载Java的核心类. 第二种:extension classloader:负责加载jre的扩展目录中的jar包. 第三种 ...

  9. Spring Boot 容器选择 Undertow 而不是 Tomcat

    Spring Boot 内嵌容器Undertow参数设置 配置项: # 设置IO线程数, 它主要执行非阻塞的任务,它们会负责多个连接, 默认设置每个CPU核心一个线程 # 不要设置过大,如果过大,启动 ...

  10. 廖雪峰Java6IO编程-2input和output-1inputStream

    1.InputStream 1.1InputStream是所有输入流的超类: int read() * 读取下一个字节,并返回字节(0-255) * 如果已读到末尾,返回-1 * read()方法是阻 ...