DOM是针对HTML和XML文档的一个API
IE中的所有DOM对象都是以COM对象的形式实现的
实例化
通过DOM获取节点
< div id= "myDiv" >
< div class = "" id= "div1" > text< / div>
< div class = "" id= "div2" > text< / div>
< / div>
< script>
< ! -- 要在html文件读取结束后再获取DOM 节点 -- >
var myDiv= document. getElementById ( "myDiv" ) ;
console. log ( myDiv) ;
var div1= document. getElementById ( "div1" ) ;
console. log ( div1) ;
< / script>
通过DOM创建节点
< script>
var node= document. createElement ( "LI" ) ;
var textNode= document. createTextNode ( "Hello" ) ;
node. appendChild ( textNode) ;
document. getElementById ( "myDiv" ) . appendChild ( node) ;
< / script>
文档类型
Document
表示整个html文档
属性
属性 描述 body 直接指向body元素 head 获取html头部内容 title 获取文档标题 doctype $获取<!DOCTYPE>兼容性不强 URL 获取完整的URL domain 获取域名 referrer 获取链接到当前页面的那个页面的URL images 获取页面所有的img对象 返回值:HTMLCollection forms 获取页面所有的form对象 返回值:HTMLCollection links 获取文档中带有href属性的a元素
方法
方法 作用 getElementById() 通过元素id获取元素节点 调用者:document 参数:想要获取的元素id 返回值:找到的第一个元素,如果没有则返回null
< div class = "app" >
div. app
< / div>
< div id= "app" >
div#app1
< / div>
< script>
var idApp= document. getElementById ( "app" ) ;
console. log ( idApp) ;
< / script>
方法 作用 getElementsByClassName() 通过元素类名获取元素节点 调用者:document 参数:一个字符串表示元素的类名,可以由空格隔开 返回值:HTMLCollection(包含一个或多个元素的list)可以使用数组的操作方式处理结果
< div class = "app" >
div. app
< / div>
< div id= "app" >
div#app1
< / div>
< script>
var classAPP= document. getElementsByClassName ( "app" ) ;
console. log ( classAPP) ;
< / script>
方法 作用 getElementsByTagName() 通过元素的元素名/标签名找到对应的元素 调用者:document 参数:一个字符串表示元素的元素名 返回值:找到的所有符合条件的元素集合
< div class = "app" >
div. app
< / div>
< div id= "app" >
div#app1
< / div>
< script>
var myDivs= document. getElementsByTagName ( "div" ) ;
console. log ( myDivs) ;
< / script>
方法 作用 getElementsByName() 通过元素的name属性找到对应的元素 调用者:document 参数:一个字符串表示元素name 返回值:NodeList,包含一个或多个元素
< div name= "myDiv" > 123 < / div>
< script>
var myNameDiv= document. getElementsByName ( "myDiv" ) ;
console. log ( myNameDiv) ;
< / script>
Element
属性
属性 描述 id 元素在文档中的唯一标识符 className 与元素的class特性相对应 可以重复,可以有多个,用空格分隔 title 与元素相关的附加说明信息 src img元素具有的属性 alt img元素具有的属性 自定义属性
方法
方法 作用 setAttribute(); 给获取到的元素设置属性 调用者:要设置属性的元素 参数:("属性名",“对应值”)返回值: 注意:要设置的值存在时,修改原来的值,不存在的话,添加值
< div class = "one" >
myDiv
< / div>
< script>
var node= document. getElementsByClassName ( "one" ) [ 0 ] ;
node. setAttribute ( "className" , "two" ) ;
console. log ( node) ;
< / script>
方法 作用 getAttribute(); 获取到相应元素的某个属性 调用者:元素 参数:属性名 返回值:对应的属性值
< div class = "one" style= "color: red;" >
myDiv
< / div>
< script>
var node= document. getElementsByClassName ( "one" ) [ 0 ] ;
console. log ( node. getAttribute ( "class" ) ) ;
console. log ( node. getAttribute ( "style" ) ) ;
< / script>
方法 作用 removeAttribute(); 移除相应元素的某个属性 参数:属性名
< div class = "one" id= "one" style= "color: red;" >
myDiv
< / div>
< script>
var myDiv= document. getElementById ( "one" ) ;
myDiv. removeAttribute ( "id" ) ;
console. log ( myDiv) ;
< / script>
方法 作用 createElement(); 创建一个dom节点 调用者:document 参数:要创建元素的标签名,在html中不区分大小写,在xml中区分大小写
< script>
var node= document. createElement ( "LI" ) ;
< / script>
window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法 通常用于 body元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码
window. onload = function ( ) {
Func1 ( ) ;
Func2 ( ) ;
Func3 ( ) ;
... . .
}
兄弟、孩子节点属性
属性 描述 firstElementChild 某个节点的第一个孩子 lastElementChild 某个节点的最后一个孩子元素节点
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
var myDiv= document. getElementById ( "myDiv" ) ;
console. log ( myDiv. firstElementChild) ;
console. log ( myDiv. lastElementChild) ;
< / script>
属性 描述 nextElementSibling 某个节点的下一个兄弟元素节点 previousElementSibling 某个节点的上一个兄弟元素节点
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
console. log ( myDiv. firstElementChild. nextElementSibling) ;
console. log ( myDiv. lastElementChild. previousElementSibling) ;
< / script>
属性 描述 childElementCount 返回该节点子元素的数量
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
var myDiv= document. getElementById ( "myDiv" ) ;
console. log ( myDiv. childElementCount) ;
< / script>
属性 描述 innerHTML 获取或设置指定元素标签内的 html内容
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
var myDiv= document. getElementById ( "myDiv" ) ;
console. log ( myDiv. innerHTML) ;
< / script>
属性 描述 innerText 获取或设置指定元素标签内的文本值
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
var myDiv= document. getElementById ( "myDiv" ) ;
console. log ( myDiv. innerText) ;
< / script>
属性 描述 textContent 返回该元素内部的text
< div class = "one" id= "myDiv" style= "color: red;" > myDiv
< div id= "div1-1" > 1 < / div>
< div id= "div1-2" > 2 < / div>
< div id= "div1-3" > 3 < / div>
< div id= "div1-4" > 4 < / div>
< / div>
< script>
console. log ( myDiv. textContent) ;
< / script>
Text
属性
< div> hello, world< / div>
< script>
var div= document. getElementsByTagName ( "div" ) [ 0 ] ;
console. log ( div. innerText. length) ;
< / script>
方法
方法 描述 appendData 给文本节点追加文本 调用者:文本节点 参数:要追加的文本内容
< div> hello, world< / div>
< script>
var textNode= document. createTextNode ( "中国" ) ;
textNode. appendData ( "你好" ) ;
console. log ( textNode) ;
< / script>
方法 描述 appendChild 向节点添加最后一个子节点
< div> hello, world< / div>
< script>
var div= document. getElementsByTagName ( "div" ) [ 0 ] ;
var textNode= document. createTextNode ( "中国" ) ;
div. appendChild ( textNode) ;
< / script>
方法 描述 deleteData 删除文本 调用者:文本节点 参数:(开始位置,要删除的数量)
< script>
var textNode= document. createTextNode ( "helloworld" ) ;
textNode. deleteData ( 0 , 2 ) ;
console. log ( textNode) ;
< / script>
方法 描述 insertData 插入文本 参数:(开始位置,要插入的数据)
< script>
var textNode = document. createTextNode ( "hello," ) ;
textNode. insertData ( 6 , "Tom" ) ;
console. log ( textNode) ;
< / script>
方法 描述 replaceData 替换文本 调用者:参数:(开始的位置,要替换文本的长度,替换的文本)
< script>
var textNode = document. createTextNode ( "你好世界" ) ;
textNode. replaceData ( 0 , 2 , "*" ) ;
console. log ( textNode) ;
< / script>
方法 描述 splitText 将两个文本节点分为两个 参数:分割点的位置,返回值:分割好的后面的文本节点
< script>
var textNode= document. createTextNode ( "helloworld" ) ;
console. log ( textNode. splitText ( 5 ) ) ;
< / script>
方法 描述 substringData 提取文档节点中的字符串 参数:(开始的位置,要提取文本的个数) 返回值:提取出来的字符串 注意:不改变原文本对象
< script>
var textNode= document. createTextNode ( "helloworld" ) ;
console. log ( textNode. substringData ( 0 , 5 ) ) ;
console. log ( textNode) ;
< / script>
方法 描述 createTextNode 创建一个文本节点 调用者:document 参数:文本内容 返回值:textNode
< script>
var textNode= document. createTextNode ( "杰瑞" ) ;
console. log ( textNode) ;
< / script>
Comment
注释
方法
< script>
var cNode = document. createComment ( "这是一个注释" ) ;
console. log ( cNode) ;
< / script>
DOM节点操作
< div> 123 < / div>
< script>
var myDiv = document. createElement ( 'div' ) ;
myDiv. innerText = "这是新创建的div" ;
var rootDiv= document. getElementsByTagName ( "div" ) [ 0 ] ;
rootDiv. appendChild ( myDiv) ;
< / script>
节点追加
方法 描述 appendchild() 将节点作为子节点追加到调用它的节点的后面 调用者:父节点 参数:要添加的新节点
< script>
var myDiv= document. createElement ( 'div' ) ;
myDiv. innerText= "第五个节点" ;
var rootDiv= document. getElementsByClassName ( 'parent' ) [ 0 ] ;
rootDiv. appendChild ( myDiv) ;
< / script>
注意 :任何dom节点不能同时出现在文档的多个位置,如果追加的节点是原本存在的,那只会改变节点位置
< script>
var rootDiv= document. getElementsByClassName ( 'parent' ) [ 0 ] ;
var firstDiv= document. getElementsByClassName ( "child" ) [ 0 ] ;
rootDiv. appendChild ( firstDiv) ;
< / script>
节点插入
方法 描述 insertBefore() 将新的节点插入到之前某一个节点的前面 调用者:父节点 参数:(要插入的新节点,旧的节点)
< div class = "parent" >
< div class = "child" > 1 < / div>
< div class = "child" > 2 < / div>
< div class = "child" > 3 < / div>
< div class = "child" > 4 < / div>
< / div>
< script>
var myDiv= document. createElement ( 'div' ) ;
myDiv. innerText= "x" ;
var rootDiv= document. getElementsByClassName ( 'parent' ) [ 0 ] ;
var childNode= document. getElementsByClassName ( 'child' ) [ 2 ] ;
rootDiv. insertBefore ( myDiv, childNode) ;
< / script>
节点删除
方法 描述 removeChild 将某个子节点删除 调用者:父节点 参数:要删除的子节点
< div class = "parent" >
< div class = "child" > 1 < / div>
< div class = "child" > 2 < / div>
< div class = "child" > 3 < / div>
< div class = "child" > 4 < / div>
< div class = "child" > 5 < / div>
< / div>
< script>
var rootDiv= document. getElementsByClassName ( 'parent' ) [ 0 ] ;
var childNode= document. getElementsByClassName ( 'child' ) [ 2 ] ;
rootDiv. removeChild ( childNode) ;
< / script>
节点复制
方法 描述 cloneNode() 复制节点 调用者:要复制的节点自身 参数:一个可选参数Boolean(默认为false,浅克隆只复制标签;如果为true,深克隆复制标签和内容)
< div class = "parent" >
< div class = "child" > 1 < / div>
< div class = "child" > 2 < / div>
< div class = "child" > 3 < / div>
< / div>
< script>
var rootDiv= document. getElementsByClassName ( 'parent' ) [ 0 ] ;
var childNode= document. getElementsByClassName ( 'child' ) [ 0 ] ;
var cloneChildNode= childNode. cloneNode ( true ) ;
rootDiv. appendChild ( cloneChildNode) ;
< / script>