dom简介：

DOM: dom简介： <!-- DOM:文档对象模型--> <!-- DOM简介： 1.DOM是文档对象模型，由W3C组织提出的标准 2.DOM是一种XML文档的解析标准 3.DOM的原理是将XML/XHTML文档装入的内容，已节点的形式进行解析-文档节点树 4.DOM还提供了相应的API，可以对节点进行增删查改 5.利用DOM可以让javascript对网页的袁术进行控制，实现动态页面的效果--> < div > < p name= "ps" > < span id= "span1" > ok </ span > < a href= "#" class= "a1" > ok </ a > < p > ok </ p > </ p > </ div > var a = null ; //节点四种方式 //1.根据文档中的id属性值来得到节点var a=document.getElementById（"id值"）； a = document . getElementById ( "span1" ); console . log ( a ); //2.根据文档中的class属性值来得到节点 //弄成数组形式的节点 arr var arr = document . getElementsByClassName ( "a1" ); console . log ( arr [ 0 ]); //3.根据文档中的元素名称来得到节点 var arr = document . getElementsByTagName ( "p" ); console . log ( arr [ 0 ]); console . log ( arr [ 1 ]); //4.根据文档中的name属性值来得到节点 var arr = document . getElementsByName ( "ps" ); console . log ( arr [ 0 ]); // 可以根据员工节点继续获得其中的节点 var span1 = document . getElementsByName ( "ps" )[ 0 ]. getElementsByTagName ( "span" )[ 0 ]; console . log ( span1 ) var body1 = document . getElementsByTagName ( "body" )[ 0 ]; //根据某一个节点来查找其中所有的节点,包括文本节点 var arr = body1 . childNodes ; console . log ( arr ); // 根据某一个节点来查找其中所有的节点，不包括文本节点 var arr1 = body1 . children ; console . log ( arr1 ); //获得第一个子节点,包括子节点 var body1 = document . getElementsByTagName ( "body" )[ 0 ]; var firstE = body1 . firstChild ; console . log ( firstE ); //☆☆☆☆☆不包含文本节点的重要 // 获得第一个子节点，不包括子节点 var firstEC = body1 . firstElementChild ; console . log ( firstEC ); //获得最后一个子节点，包括文本点 var lastC = body1 . lastChild ; console . log ( lastC ); // 获得最后一个子节点，不包括文本节点 var lastCE = body1 . lastElementChild ; console . log ( lastCE ); // 获得兄弟节点 // 获得下一个兄弟接点，包含文本节点 var a = document . getElementsByClassName ( "a1" )[ 0 ]; var nextB = a . nextSibling ; console . log ( nextB ); // 获得下一个兄弟节点，不包含文本节点 var nextBE = a . nextElementSibling ; console . log ( nextBE ); // 获得上一个兄弟节点，包含文本节点 var beforeB = a . previousSibling ; console . log ( beforeB ); // 获得上一个兄弟节点，不包含文本节点 var beforeBE = a . previousElementSibling ; console . log ( beforeBE ); // 获得父节点 var parentB = a . parentNode ; console . log ( parentB ); var div1 = document . getElementById ( "div1" ) // 使用js来修改双标记中内容 div1 . innerHTML = " <a href='dom.html'>连接</a>" ; console . log ( div1 . children [ 0 ]);