10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 ;JS中所有的节点类型都继承自Node类型

  nodeName 与nodeValue  如果是一个元素 那么nodeName中保存的是标签名称,而nodeValue默认为空

节点关系-每个节点都有一个childNodes属性 ,其中保存着nodeList对象, 注意的是nodeList对象并不是Array实例,而是基于DOM结构动态执行查询的结果;因此在删除或者添加nodeChild时特别注意下标的变化

parentNode -父节点 该属性指向DOM文档结构的上一层元素,

   firstChild:当前node节点的第一个子节点

   lastChild :当前node节点的最后一个子节点

   hasChildNodes();  当该Node节点包含一个或者多个节点时候,此方法返回true

操作节点 --appendChild() 接收一个Node类型的元素  添加到当前节点的childNodes末尾 -如果被添加的节点已经是当前DOM文档的一部分 则将该节点原来的位置移动到childNodes末尾

  insertBefore()  此方法接收两个参数,第一个参数为被插入的节点,第二个为参照节点,执行过后 被插入的节点作为参照节点的同胞节点,如果参照节点为null 则此方法与appendChild一致

  replaceChild()  替换节点  第一个参数为被插入的节点,第二个为被替换的节点,此方法执行后 移除被替换的节点并在其位置上放置被插入的节点

  removeChild() 移除节点   接收一个子节点参数对象,移除后返回这个子节点对象,通过移除的的节点仍然由文档持有,但在DOM结构中没有其位置而已

注意以上方法都是在由当前节点的父节点对象上执行,否则将会报错

  cloneChild()  复制节点,接收一个boolean值参数,表示是深复制(包含当前节点的所有子节点)还是浅复制(当前节点对象本身)  此方法 返回被复制的节点对象

document类型

  js通过Document对象来表示文档,在浏览器中document对象是HTMLDocument对象的一个实例,表示这个HTML页面,document对象具有以下特性 nodeType的值为9  nodeType为“#document”

文档信息--title属性

<script>
var dom = window.document;
console.log(dom.title); // 原标题 aaaa
dom.title="myTest"; //修改文档标题 为myTest
console.log(dom.title); //myTest 并且将在浏览器上显示
</script>

URL,domain,referrer 属性   -网页请求的属性

  URL : 包含页面完整的URL(地址栏显示的URL)

  domain : 包含页面的域名

  referrer : 保存着链接到当前页面的那个页面的URL ,简单说 就是A页面有个链接,点击链接会跳转到B页面,此时访问B页面的referrer属性 就会返回A页面的URL

  以上属性中只有domain属性是可以设置,由于跨域安全考虑,来自不同子域的页面无法进行JS通讯;如果将页面的domain属性设置为同一个值,那么这些页面就可以互相访问对方包含的js对象

  domain的限制,如果domain设置之后就不能再进行设置

查找元素---------document.getElementById()、getElementByTagName()  、getElementByName()

  getElementById() : 根据元素的ID 查找这个元素  完全匹配模式区分大小写,如果ID不存在则返回null  (IE8及以前版本不区分大小写)

  getElementByName(): 根据元素的name属性去匹配元素,返回一个或者多个元素(常用于页面的单选按钮,必须存在相同的Name属性)

  getElementByTagName() :根据标签名称查找元素 ,返回包含零个或者多个元素的nodeList,html文档中返回的是HTMLCollection对象,

  HTMLCollection.item()  : j接收一个下标参数,返回指定位置的HTML元素

  HTMLCollection.nameItem() : j接收一个参数,以集合中的元素的name属性去匹配此参数,返回匹配成功的元素

文档写入操作   write() 、writeln 、open()、close()

  write() 和writeln() 都接收一个字符串参数 进行写如操作,区别则是writeln方法会在字符串末尾添加换行符(\n),  此方法亦可以动态的包含外部资源 例如写入一段js脚本;此方法在页面加载的时候会直接输出内容至页面,若在页面加载完毕后执行则会重写整个页面

 Element类型 ——用于表现XML或HTML元素 ,提供了对元素标签名称、子节点及特性的访问

  Element的noteType 值为1,nodeName为元素的标签名,nodeValue值为null

元素的tagname 一般都会等于nodeName 在HTML中 所有的标签名 都采用大写的方式   因此取此属性进行对比时候 注意转换大小写

html元素  包含   ID : 文档元素唯一标识符    title:有关元素的附加说明信息    lang :元素内容的语言代码,基本不使用     dir : 语言方向 值可以为ltr(left -to-right) 或者 rtl (right-to-left)       className:元素的CSS属性名称 常用

  操作特性

    getAttribute() :  获取元素的特性,接收一个特性名称返回此特性值   ,若不存在返回null, 此方式也可以获取自定义的特性值      注意的是 class  是获取样式属性 而非 className ,className使用在通过对象属性访问特性时才使用

     setAttribute() :  第一个参数为特性名称,第二个参数为特性值 ,执行后会在浏览器立即展现执行后的效果,如被设置的特性不存在则创建这个特性并且赋值

    removeAttribute() : 接收一个参数为特性名称,移除指定元素的特性  执行后会在浏览器立即展现执行后的效果

  onclick等事件处理脚本  如果以getAttribute() 方式获取,则返回相应代码的字符串,若以元素属性的方式访问则返回一个javascript函数

attributes属性——element类型是使用attributes属性的唯一一个DOM节点类型,attributes属性包含的是以一个NamedNodeMap,与nodeList相似,也是一个动态的集合       以html标签DIV 为例:此属性包含该DIV 的name与值   ID 与值   class与值

    NamedNodeMap  包含下列方法

       getNamedItem(name) :返回nodeName属性等于name的节点

       removeNamedItem(name): 移除列表中等于name的节点

       setNamedItem(node) :向列表中添加节点,以节点的nodename属性为索引

       item(pos): 返回位于指定下标的节点

  创建元素    document.createElement(“name”)  创建一个指定标签名的元素  返回这个元素对象  并且可以指定这个元素的一些特性,通过appendChild等方法可以添加至文档树中,一旦将元素添加至文档树上,浏览器会立即展示该元素

 Text类型——文本节点由Text类型表示,包含的纯文本内容,内容文本中可以包含转义后的html字符,但不能包含html代码   text节点具有以下特征

    nodeType值为3,nodeName值为“#text”  ,nodeValue值为节点所包含的文本,parentNode必须是一个Element元素,不支持子节点

    操作方法:  appendData(text) : 将一段文本内容添加至节点末尾

         deleteData (offset,count) : 从offset位置开始删除指定count个字符

         insertData (offset,text): 从offset位置插入文本内容

         replaceData(offset,count,text) : 用text文本替换 从offset位置开始到offset+count位置的字符

         splitText(offset): 从offset位置将当前文本节点分割成两个文本节点

         subStringData(offset,count): 从offset位置开始截取至offset+count位置的字符

       length: Text类型的字符数量

  创建文本节点  createTextNode()    接收文本类型字符串或者转义后的html字符

  原则上来说一个Element元素只有一个文本子节点,在特定情况下也可能包含多个 文本子节点

  规范文本子节点  ——dom文档中存在相邻的文本节点会导致混乱,-------在包含一个或者多个文本子节点的元素上调用 normalize() 方法则会将所有的文本节点汇总成一个文本子节点,而这个子节点的值为合并前每个子节点的值进行拼接而成的值

JAVASCRIPT高程笔记-------第十章 DOM对象的更多相关文章

  1. Javascript 解析字符串生成 XML DOM 对象。

    Javascript 接收字符串生成 XML DOM 对象.实测对 Firefox .IE6 有效.可用于解析 ajax 的服务器响应结果,也可用于解析自定义字符串.​1. [代码]函数   ppt模 ...

  2. DOM(JavaScript高程笔记)

    一.节点层次 1.Node类型 if (someNode.nodeType == 1){ // 适用于所有浏览器 alert("Node is an element."); } N ...

  3. JavaScript进阶 - 第9章 DOM对象,控制HTML元素

    第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

  4. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JavaScript学习笔记系列2:Dom操作(一)

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  6. JAVASCRIPT高程笔记-------JSON与AJAX

    json对象——语法 简单值:与JS相同语法,可以是字符串,数值,布尔值,null:但不支持undefined 对象: 复杂数据类型,表示一组有序的键值对,键值对的值可以是简单数据,也可以是复杂数据 ...

  7. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

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

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

  9. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...

随机推荐

  1. php资源集

    php资源集 一.php资源网站 1.php中文网(js特效,模板,软件工具下载,课程) www.php.cn js特效下载_js特效代码_js特效大全-php中文网免费下载站http://www.p ...

  2. 小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架

    一.单容器页面结构 <!DOCTYPE html> <html> <head> <title>Jquery mobile 基本页面框架</titl ...

  3. Powerful Bash-style command line editing for cmd.exe

    https://mridgers.github.io/clink/ Clink Powerful Bash-style command line editing for cmd.exe Downloa ...

  4. html5-1 网页结构描述

    html5-1 网页结构描述 一.总结 一句话总结:注意head中的title,keywords,description,这对seo优化很有帮助 1.如何给某元素动态使用类似onclick方法? 点o ...

  5. 数据序列化之protobuf

    数据序列化之protobuf 很多时候需要将一些数据打包,就是把这些数据搞在一起,方便处理.最常见的情况就是把需要传输的数据,当然数据不止一条,打包成一个消息,然后发送出去,接收端再以一定的规则接收并 ...

  6. 使用Redis做产品统计的两种模式

    http://zihua.li/2012/07/two-patterns-of-statistics-using-redis/ 产品运行过程中及时记录收集并分析统计数据对产品的持续改进有重要的指导作用 ...

  7. NOIP 模拟 玩积木 - 迭代加深搜索 / bfs+hash+玄学剪枝

    题目大意: 有一堆积木,0号节点每次可以和其上方,下方,左上,右下的其中一个交换,问至少需要多少次达到目标状态,若步数超过20,输出too difficult 目标状态: 0 1 1 2 2 2 3 ...

  8. Fastjson 序列化,反序列化Map对象排序问题(字符串转map,map转字符串)

    背景 记录项目中遇到的 关于fastjson jsonobject转string乱序,string转jsonObject乱序问题的解决方案 fastJson issues 问题来源描述参见: http ...

  9. 一题多解(五) —— topK(数组中第 k 大/小的数)

    根据对称性,第 k 大和第 k 小,在实现上,是一致的,我们就以第 k 小为例,进行说明: 法 1 直接排序(sort(A, A+N)),当使用一般时间复杂度的排序算法时,其时间复杂度为 O(N2) ...

  10. 改变浏览器中默认的ctrl+s方法

    在一般的情况下,我们在浏览网页的时候按下ctrl+s,浏览器会弹出一个保存网页的框. 但是在一些特定的网页中,我们希望ctrl+s不是弹出默认的保存窗口,而是进行一下别的操作. 比如在我们使用简书的时 ...