JS高级程序设计精简版(第十二章:DOM)附思维导图

   时隔两年后二刷JavaScript高级程序语言,纯手打读书笔记+思维导图,让自己有一个比较全面的知识体系,后面有遇到例子的时候会慢慢补充更多的用法。有不足之处欢迎大家评论区指出,共勉!!

  • DOM

1、定位元素

getElementById()

getElementsByTagName()

getElementsByClassName()

返回一个包含他们的HTMLCollection,类似NodeList的使用,但其对象有一个额外的方法:

namedItem(),可通过标签的name属性获得DOM的引用,或者用images[‘myImage’]这样。

中括号[]参数,数字则是索引,调用item(0)。字符串则是名称,调用namedItem(‘name’)

2、文档写入

document.write("" + (new Date()).toString() + "");

write()   //写入文本,若页面加载完成后调用此方法,则会重写整个页面。

Writeln()   //末尾加入换行

3、Element类型

element表示HTML或者XML元素

  1. HTML元素

通过HTMLElement表示,继承了element并增加了一些属性。

id元素唯一标识符

title额外信息(鼠标移到元素上的提示)

className 指定css类

  1. 获得属性

可以通过以下集中方法获取元素的属性,参数要和HTML的实际属性名一样。

getAttribute()

setAttribute(属性名,属性值)

removeAttribute()

也可以通过DOM对象直接访问属性,但与方法访问有以下两点区别

①style属性,属性返回的是一个对象,方法返回的是css字符串。

②事件属性,属性返回的是JS代码,方法返回字符形式的JS代码。

  1. attributes属性

包含一个NamedNodeMap实例,有以下四种方法:

getNamedItem(name)

removeNamedItem(name)

setNamedItem(name) //给元素添加新属性

Item(index)

每个节点的nodeName是属性名,nodeValue是属性值。

  1. 创建元素

document.createElement(标签名)

  1. 元素后代

childNodes属性包含元素所有的子节点,包括其他元素、文本、注释等。

4、Text类型

Text节点中的文本可以通过nodeValue或者data访问或修改。

  1. 操作文本方法

AppendData(text)

deleteData(index,count)

insertData(index,text)

replaceData(index,count,text)

splitText(index)   //拆分文本节点:将文本拆分为两个文本节点

substringData(index,count)

  1. 创建文本节点

document.createTextNode(html)

  1. 合并节点

normalize()所有类型的节点都有此方法,在父节点中调用此方法,可以将子节点中,相邻的多个相同类型节点合并为一个节点

5、comment类型

注释节点,除了splitText()方法之外,拥有与Text类型一样的其他方法和属性。

可以通过document.createComment()创建注释节点

  1. DocumentType类型

通过document.doctype访问,此对象有三个属性:name、entities、nonation。

二、DOM编程

1、动态脚本

动态的创建

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript)