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

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() 方法则会将所有的文本节点汇总成一个文本子节点，而这个子节点的值为合并前每个子节点的值进行拼接而成的值

 

转载于:https://www.cnblogs.com/shenwenbo/p/8024698.html