10.1节点层次

html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型。

10.1.1 Node类型

JavaScript中的所有节点类型都承自Node类型,因此所有节点类型都共享着相同的基本属性和方法

nodeType属性表明节点的类型

每个节点都有一个childNodes属性,保存着一个Nodelist类数组对象,可以使用Array.prototype.slice()方法将其转换为数组

parentNode属性指向文档树中的父节点

previousSbling、nextSibling

appendchild()向childNodes列表的末尾添加一个节点

inserBefore()把节点放在childNodes列表中某个特定的位置上,接受两个参数:要插入的节点和作为参照的节点

replaceChild()用于替换节点,接受两个参数:要插入的节点和要替换的节点

removeChild()这个方法接受一个参数即要移除的节点

cloneNode()接受一个布尔值参数,true时复制节点及其整整个子节点树,false时只复制节点本身

normlize()用于处理文档中的文本节点

10.1.2 Doucument类型

nodetype的值为9,nodename的值“#document”, nodevalue的值为null

document对象是window对象的一个属性

doucument的子节点可以是DocumentType、Element、ProcessingINstruction或comment

document.getElementsByTaName()、document.getElementsByName()会返回一盒HTMLCollection

10.1.3Element类型

nodetype的值为1, nodename的值为元素的标签名, nodevalue的值为null

访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性

if(element.tagName.toLowerCase()=="div"){}

Html中标签名始终是以大写输出的,Xml会与源码中一致

操作特性的DOM方法主要有getAttribute()、setAttribute()、removeAttribute(),这三种方法可以针对任何特性使用

第十章 DOM的更多相关文章

  1. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  2. JAVASCRIPT高程笔记-------第十章 DOM对象

    10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 :JS中所有的节点类型都继承自Node类型 nodeName 与nodeValue  如果是一个元素 那么nodeName中保 ...

  3. 第十章—DOM(0)—NODE类型

    DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...

  4. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  5. 读书笔记 - js高级程序设计 - 第十章 DOM

      文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...

  6. 第十章—DOM(三)——Text类型

    文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征: 看看下面的代码: div元素开始和结束标签只要存在内容,就会创建一个文本节点.可以使用以下代码来访问元素的这些文本子节点: 访问 ...

  7. 第十章—DOM(二)——Element类型

    Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...

  8. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  9. js-JavaScript高级程序设计学习笔记6

    第八章 BOM 1.BOM的核心对象是window,他表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JS访问浏览器窗口的一个接口,又是ES规定的Global对象. 2.定义全 ...

随机推荐

  1. SparkConf加载与SparkContext创建(源码阅读四)

    sparkContext创建还没完呢,紧接着前两天,我们继续探索..作死... 紧接着前几天我们继续SparkContext的创建: 接下来从这里我们可以看到,spark开始加载hadoop的配置信息 ...

  2. FastJson的使用

    FastJson FastJson:阿里巴巴的一个Json处理工具包,包括序列化和反序列化两部分. <dependency> <groupId>com.alibaba</ ...

  3. AttributeError: '_csv.reader' object has no attribute 'next'

    我在使用pyhon3.4运行以下代码时报错:AttributeError: '_csv.reader' object has no attribute 'next' import csv import ...

  4. localStorage、sessionStorage在无痕模式下被禁用

    在移动web开发中,经常会使用到localStorage去缓存一些数据,一般情况下,我们只需要按照下面的代码去使用就不会有 问题. if(window.localStorage){ localStor ...

  5. 创建javascript对象的几种方式

    ECMAScript提供的对象有:String.Date.Array.Boolean.Math.Number.RegExp.Global 程序中需要用到很多自定义的js对象 1.直接创建 var ob ...

  6. spring JPA 动态查询

    没什么好说的,记住就行. 下面是在Service中的方法 Page<TStaff> staffs=dao.findAll(new Specification<TStaff>() ...

  7. chrome启用 NPAPI [转]

    需前往 chrome://flags/#enable-npapi 手动开启 原帖:http://tieba.baidu.com/p/3737775413 第1步:开启NPAPI, 就是置顶帖里说的 我 ...

  8. 使用微软CORS包不能跨域访问的问题

    使用jquery的ajax异步调用的时候会出现不能跨域访问的问题,这个问题一般有两种方法. 1:使用jsonp跨域 2:使用html5的CORS 在这里只谈论第二种,微软对CORS提供的了支持,在Nu ...

  9. 杭电acm 1003

    #include<cstdio> #include<cstdlib> #include<cstring> #include<iostream> usin ...

  10. os.path 大全

    os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回一个路径的最后一个组成部分 os.path.commonprefix(list) #返回 ...