Js dom操作总结
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 ...
随机推荐
- Java工程师三大框架面试题汇总
1. Hibernate3 提供了属性的延迟加载功能? 当Hibernate在查询数据的时候,数据并没有存在与内存中,当程序真正对数据的操作时,对象才存在与内存中,就实现了延迟加载,他节省了服务器的内 ...
- Springmvc controller和jsp页面传值对象类型问题和普通问题
一:JSP-->controller 1.当jsp页面传递的值是对象类型时候比如User.name User.age的user对象传递,需要以下操作 jsp页面提供对应标签的value必须存在且 ...
- 【Ngui 学习系列之一:简单组件的操作】
一.Buttonunity edit: Sprite作为父对象和背景 -- Collider -- Button script Label 作为子对象和显示文字代码: private UIButton ...
- html5,视频的兼容
<video controls="controls" width="500" > <source src="1.mp4 ...
- SQL Server 2008连接字符串写法大全
一..NET Framework Data Provider for SQL Server 类型:.NET Framework类库使用:System.Data.SqlClient.SqlConnect ...
- http错误码大全?
响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...
- 技巧分享:解决Word 2010当中“分页符”造成的空白行
技巧分享:解决Word 2010当中“分页符”造成的空白行 P1:关于“分页符” 在Word当中插入“分页符”之后,后面的内容就会“更起一段”.就好像“换行符”(回车)会让后面的内容“另起一行”一样. ...
- JVM内存管理
前几天公司的郑大晔校上,XXX同事做了JVM的Session,于是趁端午节放假的功夫,研究了一些JVM相关的知识. 在Java生态系统中,JVM占据至关重要的作用,就像一个适配器,它向编程语言(主要是 ...
- js错误
1ajax提交 从数据库里取文件typeerror: 'stepup' called on an object that does not implement interface HTMLInputE ...
- easyui DataGrid 工具类之 util js
var jq; var tab; var tabsIndex; /** ...