参考

javascript原生dom操作方法

JavaScript原生的dom操作方法

第一类:节点查找相关方法和属性

document/父节点.getElementById()
document/父节点.getElementsByTagName()
document/父节点.getElementsByName() //IE8以下不兼容

称作:dom0级方法

.获取元素的属性(常用) getAttribute()
.设置元素的属性(常用) setAttribute()

其它,dom扩展中还提供了以下方法:

querySelector()
querySelectorAll()
matchesSelector()
上述方法接收一个css选择符对

考虑空白符的相关层次关系属性

.访问子节点的属性 .childNodes;//注意,由于兼容性问题,有所谓"空白项"问题

var childnode = document.getElementsByTagName("ul")[0].childNodes;

.访问父节点 parentNode

JavaScript dom对象常用属性

. innerHtml   dom对象.innerHtml

. nodeType

. nodeName

. offsetWidth  offsetHeight

.scorllHeight

document.documentElement.offsetWidth || document.body.offsetWidth;
document.documentElement.offsetHeight;

第二类:动态操作节点相关方法

.创建元素节点 createElement() 或 document.createElement()

.创建文本节点 createTextNode()

.添加子节点:父元素.appendChild()

.插入新节点: 父元素.insertBefore(newNode,relNode)

.替换节点:父元素.replaceChild(newNode,oldNode)

.删除节点:父元素.removeChild(node)

.克隆节点:节点.cloneNode() 传入true参数代表深度克隆,否则为浅克隆

Javascript-DOM笔记的更多相关文章

  1. javascript DOM 笔记

    以下内容来自<javasript DOM 编程艺术>第二版 dom中三种重要的节点:元素节点.属性节点.文本节点. 几种节点的重要属性:nodeValue,nodeType(为数字1.2. ...

  2. DOM笔记(十):JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  3. DOM笔记(五):JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  4. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  5. DOM笔记(十):JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  6. DOM笔记(十三):JavaScript的继承方式

    在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...

  7. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  8. javascript高级笔记——内含事件,DOM,BOM等

    JavaScript高级笔记 1,DOM的简单学习 1.1,功能:用于控制HTML文档的内容: 1.2,获取页面标签对象:Element *document.getElementById(" ...

  9. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  10. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

随机推荐

  1. FS系统开发设计(思维导图)

      FS系统开发设计(思维导图) 最近做了一个小系统,公司应急,要对各个部门进行费用成本核算分摊,做运维,苦于无奈,简简单单的设计了一下,模仿用友ERP软件,首先对DB进行了初步设计,总体如下: 未完 ...

  2. linux kernel menuconfig【转载】

    原文网址:http://www.cnblogs.com/kulin/archive/2013/01/04/linux-core.html Linux内核裁减 (1)安装新内核: i)将新内核copy到 ...

  3. ORA-28547:connection to server failed, probable Oracle Net admin error错误,解决方法

    当用navicat连接oralce数据库时报ORA-28547错误时,直接懵逼了,上网查了资料说是navicat自带的oci.dll文件的版本和服务器端的oralce数据库的版本不一致造成的. 修改O ...

  4. 引用com.sencha.gxt.ui.GXT加载错误解决方案

    环境GWT2.7+GXT4.0 <inherits name='com.sencha.gxt.ui.GXT' /> 出现加载错误 Loading inherited module 'com ...

  5. C语言第二次实验作业

    PTA ================= 11-6 方阵循环右移 --------------- 本题要求编写程序,将给定n×n方阵中的每个元素循环向右移m个位置,即将第0.1.....n-1列变换 ...

  6. QQ控件时光轴特效总结

    1.插入HTML数据 插入html代码,一般的做法是通过document.getElementById("").innerHTML来实现. 然而在该控件中,它通过JS replac ...

  7. __cdecl & __stdcall calling conventions

    (一) __cdecl: c declaration C语言默认的函数调用方法:所有参数从右到左依次入栈,这些参数由调用者清除,称为手动清栈.C/C++默认的调用方式,可用于函数参数不确定的情况下. ...

  8. SpringMVC—对Ajax的处理(含 JSON 类型)(3)

    五.服务器端的 SpringMVC 如何返回 JSON 类型的字符串. 请求: $("#testJson8").click(function () {    $.ajax({   ...

  9. DAY17-Django之model查询

    查询表记录 看专业的官网文档,做专业的程序员! 查询相关API <1> all(): 查询所有结果——QuerySet <2> filter(**kwargs): 它包含了与所 ...

  10. DAY15-web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...