1.选取文档元素

1.1. getElemenById

基于唯一id获取，任何HTML元素可以有id属性，在文档中该值必须唯一。

1.2. getElementsByName

基于name属性的值选取HTML元素。

1.3. getElementsByTagName

通过标签名选取元素，document.getElementByTagName("div")

1.4. getElementsByClassName

通过css类选取元素

1.5. querySelectorAll()

终极的选取元素的办法，非常强大的技术，等效于jquery中的$()方法。

2.文档结构和遍历

2.1 遍历

parentNode，节点的父节点

childNodes, 只读的类数组对象，节点的子节点，注意：换行符也是一个子节点

firstChild,lastChild,  子节点的第一个和最后一个,注意：可能是换行，因为换行也是一个子节点

　　nextSibling,previoursSibling, 节点的上一个兄弟节点和下一个兄弟节点

<html><head>test</head><body>Hello World!</body></html>
console.log(document.childNodes[0].childNodes[1])； //<body>Hello World!</body>

console.log(document.firstChild.firstChild.nextSibling); //<body>Hello World!</body>

2.2 属性

　　HTML属性名不区分大小写，但js属性名大小写敏感，js属性名采用驼峰形式，其中class和for可以在html中作为属性，但是在js中为关键字，所以在js中变为className和htmlFor

<body>

    <div id="div3" class="test" >3333333333</div>

    <script>

        document.getElementById("div3").className   //test

        document.getElementsByClassName("test")[0].id //div3

    </script>

</body>

2.3 创建节点

var s = document.createElement("script");

s.url = "www.baidu.com";

2.4 插入节点

　　appendChild()是在需要插入的element节点上调用，参数为被插入的节点，将被插入节点插入到调用节点的尾部

<div id="app" class="test" >

    <div>hello</div>

</div>

<script>

    var p = document.createElement("p");

    p.innerText = "world";

    document.getElementById("app").appendChild(p);

</script>  //将p插入到<div>hello</div>后

　　insertBefore()第一个参数是待插入节点，第二个是已经存在的节点，新节点插入到该节点的前面。方法是在新节点的父节点上调用，方法的第二个参数必须为该父节点的子节点

<body>

    <div id="app" class="test" >

        <div id="app1">hello</div>

    </div>

<script>

    var p = document.createElement("p");

    p.innerText = "world";

    document.getElementById("app").insertBefore(p, document.getElementById("app1"));

</script>  //在app1前插入

2.5 删除和替换

　　removeChild()和replaceChild()的语法和insertBefore()的语法一致

Js dom操作总结的更多相关文章

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  5. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  6. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  7. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  8. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  9. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  10. js DOM操作练习

    1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue ...

随机推荐

  1. paper 129 : 比较好的开源人脸识别软件

    1.face.com 以色列公司,某年六月时被Facebook收购,同时暂停了API服务,之前测试过他们的服务,基本上是了解到的应用中做得最牛的了. 2.orbe Orbeus由麻省理工学院和波士顿大 ...

  2. Alwayson 与 mirror

    --将主副本改为同步模式和自动故障转移,将其中一个辅助副本改为同步辅助副本和自动故障转移 USE [master]GOALTER AVAILABILITY GROUP [TESTDB5AG]MODIF ...

  3. form提交的几种方法

    一. form表单中有 type是submit类型的button,点击 submit,从而会post数据,引发回传. <form action="?" name=" ...

  4. 将.NET dll注册到GAC(Global Assembly Cache)中

    当发现有多个解决方案引用一个dll时,为了不重复引用所以将.net的一个dll注册到GAC中去. gacutil.exe. 记得使用管理员权限打开 开始菜单-Microsoft Visual Stud ...

  5. 使用FastJSON，将对象或数组和JSON串互转

    Fastjson,是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库.其开源的下载网址为:https://github.com/AlibabaTech/fastjson. 示例代码如下: ...

  6. 关于mysql的几个必知点

    实际运用中遇到的才了解到的 导出sql文件时navicat导出的sql文件形式是一条记录一个insert语句,所以文件会比较大点,后续插入也会比较慢,而用mysqldump命令导出的sql文件会合并插 ...

  7. windows programming can't find windows.h

    在用控制台编译c++程序的时候,可能会遇到找不到windows.h的情况.这是因为我们在使用cl命令的时候,并没有配置好环境变量. 所以我们在运行cl命令之前,我们可以运行C:\Program Fil ...

  8. 08-FPGA状态机设计实例——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献   实验目的:1.学习状态机的相关概念 2.理解一段式.两段式以及三段式状态机的区别以及优缺点 实验平台:芯航线FPGA核心板 实验原理: 状态机全称是有限状态机(fin ...

  9. git 远程库命令

    git 常用命令在这里就不在说了,初学者点击http://www.cnblogs.com/Vdiao/p/5267250.html Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上 ...

  10. SQL 语句格式

    SELECT `menuid`, SUM(`num`)AS total, `storeid`, DATE_FORMAT(`dateline`,'%Y-%m-%d') days FROM loss WH ...