DOM(文档对象模型),描述了一个层次化的节点树

一、DOM NODE相关公共属性与方法

DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下:

1.节点基本属性

1)NodeType 节点类型,利用12个数值来表示。常见的有:1代表元素节点,2代表属性节点,3代表文本节点,8代表注释节点,9代表document,11代表iframe

2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型.例:如果是元素节点,那么nodeName的值为元素的标签名,nodeValue为null.

2.节点关系相关属性

I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够实时,动态的反映节点结构。具有length属性,也可以利用方括号或者item()访问其中的节点。

II,parentNode属性,previousSibling属性,nextSibling属性,firstChild属性,lastChild属性。

IV,ownerDocument属性,该属性指向整个文档的文档节点Document.

如果想要的知识元素节点,那么对应的属性如下:

childNodes  children

firstChild  firstElementChild

lastChild   lastElementChild

previousSibling  previousElementSibling

nextSibling  nextElementSibling

childNodes.length  childElementCount

3.操作节点相关方法

hasChildNodes()方法

1)appendChild()  父节点调用,返回新增的节点;如果新增的节点已经是文档的一部分了,那么实现效果实际上是节点的移动,结果就是该节点从原来位置转移到新位置。

2)insertBefore()  父节点调用,接收两个参数。要插入的节点和作为参照的节点。

3)replaceChild()  父节点调用,接收两个参数,要插入的节点和要替换的节点。

4)removeChild()   父节点调用  

5)cloneNode()    复制节点,如果要深复制,传入参数true,注意该节点不会复制节点的javascript属性,如事件处理程序等。

6)normalize(),其 作用在于处理文档树中相邻的文本节点

4,查找节点的相关方法

1)document.getElementById() 返回元素,

2)[document|parentNode].getElementsByTagsName() 返回NodeList,其他同上

3)document.getElementsByName() 查找单选按钮等的时候很有用

4)DOM扩展:document.querySelector();参数为css选择符,返回查找到的第一个元素

5)DOM扩展:document.querySelectorAll();参数为css选择符,返回查找到的所有元素

5,补充

虽然DOM为操作节点提供了丰富的方法,但是在需要给文档插入大量新html标记的情况下,通过DOM仍然非常麻烦,因为不仅要创建一系列的DOM节点,还要小心地按照正确的顺序插入,同时性能也不高。因此DOM扩展中定义了一下属性:

1.innerHTML属性  在读模式下,innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下,innerHTML会根据制定的值创建新的DOM树,然后用这个DOM树替换掉原来元素的所有子节点。

2)outerHTML属性  在读模式下,outerHTML返回与调用元素的所有子节点对应的html标记。在写模式下,outerHTML会根据制定的值创建新的DOM树,然后用这个DOM树完全替换掉原来元素。

注意的是,为了提高内存和性能,在使用innerHTML,outterHTML属性时候,最好手工删除要被替换元素的所有事件处理程序和JavaScript对象属性。

二、document节点类型

其nodeType为9,nodeName为document,nodeValue为null

1.特有属性

1)document.docType属性,指向DocumentType子节点

2)document.documentElement属性,指向html元素

3)document.body属性,指向body元素

4)document.title属性,指向文档标题

5)document.url/domain/referer属性,url包含页面完整URL,domain包含页面域名,referer保存者链接到当前页面的前一个页面的链接(这些特性其实都存在于html头部中)

6)document.forms  可以获得页面所有的form元素

7)document.images  可以获得页面所有的images元素

8)document.anchors  可以获得页面所有带有name属性的<a>元素

9)document.links  可以获得页面所有带有href属性的<a>元素

10)document.compatMode='CSS1Compat' 标准模式下,'BackCompat' 混杂模式。这与meta中的定义有关。

2,特有方法

2)write(),writeln()用于页面的输出流;

3)open(),close()用于打开和关闭输出流,如果是在页面加载期间使用write(),writeln(),则不需要用到上述两个方法

4)createElement()方法 创建element类型的节点

5)createTextNode()方法,创建Text类型的节点,接受一个参数,(用得不多,完全可以使用innerHTML搞定)

6)createAttributeNode()方法,创建特性节点(用得不多,完全可以使用setAttribute/getAttribute搞定)

三、Elemment类型

nodeType值为1,nodeName为标签名,nodeValue为null

1,特有属性

1)tagName属性 和 nodeName的返回值相同

2)id属性

3)title属性

4)className属性

5)attributes 除非要遍历元素的所有attribute,否则这个属性用的不多

6)style属性,如style.backGround 等,注意的是,这只能获取html代码中内嵌的样式,对于<style>标签中设置的样式,以及外联样式表中的样式,是没有办法获取的。

2,特有方法

1)getAttribute(),setAttribute()和removeAttribute()

四、Text类型

NodeType为3,NodeName为#text,nodeValue为节点所包含的文本,

1)data属性,和nodeValue的返回值相同。可以通过appendData(),deleteData(),insertData(offset,text),replaceData(offset,count,text),substringData(offset,count)等方法进行操作

2)length属性,返回文本中字符数目

3)要访问Element元素中的文本,利用

div.firstChild.data来访问。或者div.childNodes[0].nodeValue来访问。不过很多情况下都使用父节点的innerHTML属性

四、documentFragment类型

NodeType为11,NodeName为#document-fragment,nodeValue为null

documentFragment可以作为一个仓库使用,防止频繁的利用javascript进行dom操作,来提高性能。

var fragment=document.createDocumentFragment();
var ul=document.getElementById('list');
var li=null;
for(var i=;i<;i++){
li=document.createElement('li');
li.innerHTML='item'+i;
fragment.appendChild(li);
}
ul.appenChild(fragment);

五、操作表格

除了使用innerHTML之外,操作表格还有一些相对简单的API,如下:

var table=document.createElement('table');
var tbody=document.createElement('tbody');
tabel.appendChild(tbody);
tbody.insertRow();
tbody.rows[].insertCell();
tbody.rows[].cells[].innerHTML='cell1';

六:元素滚动

元素节点都可以调用的关于滚动的方法有:

scrollIntoViewIfNeeded(alignCenter):当前元素在视口不可见的时候,滚动浏览器窗口或者容器元素,让它可见。如果已经可见,那么什么都不做。alignCenter若为true,则尽量让元素显示在视口中央。

scrollByLines(lineCount):将元素内容滚动指定的行高

scrollByPages(pageCount):将元素滚动指定的页面高度

javascript学习笔记之DOM与表单的更多相关文章

  1. Django学习笔记(五)—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  2. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  3. ng2 学习笔记(二)表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  4. Javascript高级编程学习笔记(75)—— 表单(3)表单字段

    表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...

  5. Javascript高级编程学习笔记(80)—— 表单(8)表单序列化

    表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足 ...

  6. Javascript高级编程学习笔记(77)—— 表单(5)过滤输入

    在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 ...

  7. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  8. Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  9. Javascript高级编程学习笔记(73)—— 表单(1)表单基础

    表单 JS最初的一个用途就是帮助服务器分担处理表单的责任 时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用 ...

随机推荐

  1. 序列化各个类型成JSON XML实例

    LitJson组件序列化请参考http://www.cnblogs.com/leee/p/4437230.html XML序列化请参考http://www.cnblogs.com/leee/p/424 ...

  2. [ZZ] 基于DirectX shader的Per-pixel lighting实现

    这个特效需要用到DX11 UAV吗? http://blog.tianya.cn/blogger/post_show.asp?BlogID=510979&PostID=5665974 Intr ...

  3. Apache Spark源码走读之15 -- Standalone部署模式下的容错性分析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文就standalone部署方式下的容错性问题做比较细致的分析,主要回答standalone部署方式下的包含哪些主要节点,当某一类节点出现问题时,系统是如 ...

  4. MyBatis传入参数为集合 list 数组 map写法

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主要有item,index,collection,open,separator,close.ite ...

  5. TenxCloud时速云.htaccess不起作用的解决办法

    在新建容器时添加变量: ALLOW_OVERRIDE ,并将值设置为 TURE 即可.

  6. PHP 用QueryList抓取网页内容

    http://www.cnblogs.com/wb145230/p/4716403.html 之前抓取网页数据都是用Java Jsoup,前几天听说用PHP抓更方便,今天就简单研究了一下,主要是用Qu ...

  7. ubuntu挂载其他分区到/home下,将当前分区内容替换

    有时候,我们装系统时,可能因为没注意,把某一个分区分小了,导致到最后,我们的那个盘容不下了, 这时,面临的两个选择就是:要么卸载一些软件,要么重新分区,重装系统,其实,还可以这样,去把其他 多余的盘分 ...

  8. [转]C++ string的trim, split方法

    很多其他语言的libary都会有去除string类的首尾空格的库函数,但是标准C++的库却不提供这个功能.但是C++string也提供很强大的功能,实现trim这种功能也不难.下面是几种方法: 1.使 ...

  9. Jetbrains phpstorm pycharm 免费授权注册码

    通过授权服务器授权 jetbrains是一家专门做IDE的软件公司,软件也非常好用,但是授权特别贵,下面就说说免费的方式,就是使用授权服务器,地址:http://idea.qinxi1992.cn 自 ...

  10. Lazarus for Raspbian安装

    春节前看到树莓派 2代开始销售,第一时间在淘宝下单购买,无奈春节期间放假,要到3月份才可能收到,只能用QEMU模拟器先熟悉树莓系统.对从turbo Pascal开始的人来讲,如果能在树莓系统使用Pas ...