javascript笔记--(第十九章)DOM
2017-02-06 15:46
232 查看
DOM
DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构节点
加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。节点种类
节点总共分为三类:元素节点、文本节点、属性节点查找元素
W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。当我们获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问它的一系列属性
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value"> hello </div> <input id="input" type="text" value="123"/> <input id="input1" type="radio" checked/> </body> <script type="text/javascript"> document.getElementById('box').id;//获取id //document.getElementById('box').id = 'person';//设置id document.getElementById('box').title;//获取title document.getElementById('box').title = 'new_title';//设置title document.getElementById('box').style;//获取CSSStyleDeclaration对象 document.getElementById('box').style.color;//获取style对象中color的值 document.getElementById('box').style.color = 'red';//设置style对象中color的值 document.getElementById('box').className;//获取class document.getElementById('box').className = 'box';//设置class document.getElementById('box').getAttribute('className');//非IE不支持 console.log(document.getElementById('box').bbb);//获取自定义属性的值,非IE不支持 document.getElementById('box').setAttribute("bbb","new_bbb_value"); console.log(document.getElementById('box').getAttribute("bbb"));//new__bbb_value document.getElementById('box').removeAttribute("bbb");//删除属性 console.log(document.getElementById('box').getAttribute("bbb"));//null console.log(document.getElementById('input').value);//1234 console.log(document.getElementById('input1').checked);//true </script> </html>
DOM节点
node节点属性
节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:nodeName、nodeType和nodeValue<script type="text/javascript"> console.log(document.getElementById('box').nodeType);//1,元素节点 console.log(document.getElementById('box').nodeName);//Div console.log(document.getElementById('box').getAttribute("style").nodeValue);//undefined,getAttribute获取的是值,不是属性节点 console.log(document.getElementById('box').attributes.item(0).nodeValue);//color:black </script>
层次节点属性
节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value"> <span>hello1</span> <span>hello2</span> <span>hello3</span> </div> </body> <script type="text/javascript"> var div = document.getElementById('box') console.log(div.innerHTML); /* <span>hello1</span> <span>hello2</span> <span>hello3</span> */ console.log(div.childNodes.length);//得到子节点个数,IE3个,非IE7个,换行会产生空白节点 console.log(div.childNodes[0].nodeValue);//输出空白 console.log(div.attributes['bbb'].nodeValue);//bbb_value console.log(div.attributes.getNamedItem('bbb').nodeValue);//和上面效果一样 console.log(div.firstChild.nodeValue);//输出空白 console.log(div.firstChild.innerHTML);//undefined console.log(div.lastChild.nodeValue);//输出空白 console.log(div.ownerDocument);//#document console.log(div.childNodes[0].nextSibling.innerHTML);//hello1 console.log(div.childNodes[2].previousSibling.innerHTML);//hello2 console.log(div.parentNode);//body对象 </script> </html>
注意:在获取到文本节点的时候,是无法使用innerHTML这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本;在非IE中,标准的DOM具有识别空白文本节点的功能,所以在火狐浏览器是7个,而IE自动忽略了,如果要保持一致的子元素节点,需要手工忽略掉它。
节点操作
DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点。<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script type="text/javascript"> document.write("<div id='box'></div>"); var span = document.createElement("span"); var text = document.createTextNode("hello"); span.appendChild(text); document.getElementById("box").appendChild(span); var h = document.createElement("h1"); var text1 = document.createTextNode("h1"); h.appendC 4000 hild(text1); document.getElementById("box").insertBefore(h,span); var input = null; input = document.createElement('input'); input.setAttribute('type', 'radio'); input.setAttribute('name', 'sex'); document.getElementById("box").appendChild(input); //替换节点 var text2 = document.createTextNode("new_hello"); span.replaceChild(text2,span.childNodes[0]); //克隆节点 var span1 = span.cloneNode(true);//true会复制内容,否则只复制结构 span1.id = "span1"; document.getElementById("box").appendChild(span1); //删除节点 document.getElementById("box").removeChild(document.getElementById("span1")); </script> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- SUI踩坑记录
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法