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操作总结的更多相关文章

JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
js——DOM操作（一）
DOM:Document Object Model 文档对象模型文档:html页面文档对象:页面中元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
JS DOM操作函数事件阻止事件冒泡
一函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
JS DOM操作（五） Window.docunment对象——操作元素
定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling; -- 找 a ...
JS DOM操作（二） Window.docunment对象——操作样式
一对元素的定位在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端用 id 定位 -- ...
JS DOM操作（一）对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
js dom 操作技巧
1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
js DOM操作练习
1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id"> <option vlue ...

随机推荐

关于缺少nvToolsExt64_1.lib时的PhysX的处理
我本人之所以缺少这个文件是因为我的PhysX如果你的PhysX是从UE4源代码中提取的,那么可能会出现如下错误,提示找不到nvToolsExt64_1.lib(本机是64bit的操作系统) 那就执行u ...
redhat 更新 python 为 2.7.6
1. 下载 wget http://python.org/ftp/python/2.7.6/Python-2.7.6.tgz 2. 解压,编译 tar zxvf Python-2.7.6.tgz ./ ...
C语言初学者代码中的常见错误与瑕疵(23)
见:C语言初学者代码中的常见错误与瑕疵(23)
【笔记】jquery js获取浏览器滑动条距离顶部距离的写法
jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...
Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
MVC中view和controller相互传值的方法
MVC项目中,在view层如果使用前台框架,框架中会有封装好的相互传值方法.但是,那些postdata[][]方法不一定能够满足功能需求,反而一些常用的传值方法可能会刚好解决它们的不足.总结如下: 一 ...
oracle游标透彻详解分析
主:本文来自:http://www.cnblogs.com/huyong/archive/2011/05/04/2036377.html 4.1 游标概念 4.1.1 处理显式游标 4.1.2 处理隐 ...
windows 7系统下出现某盘回收站损坏解决办法
今天遇到一个从没有遇见的问题,就是领导说他的回收站损坏了,要我去看下,我一开始也没用辙,网上搜了很多,说在命令提示符里面修改,我试了不行,后来我这样做就好了:1.打开计算机 2.找到工具选项,单击选择 ...
初涉java库--ArrayList
我的车就差一个轮子啦,造好轮子,我就飞上天与太阳肩并肩啦,想想都激动.什么你要自己造轮子,是不是傻,商店里不都是别人造好的吗,又好又方便,只需一点money,你没有money,那你只能做个安静的美男子 ...
GUI 下
11.6 Swing组件 JButton JLabel JTextField JTextArea JTable JTree publicclass JTableDemo extends JFrame ...

Js dom操作总结