JS 07 Dom
2019-05-08 07:26:07来源:博客园 阅读 ()
<script type="application/javascript"> //1.获取元素结点 //1)直接获取 // ① document.getElementById() function getEle1(){ var obj=document.getElementById("userid") console.log(obj) } // ② document.getElementsByName() function getEle2() { // 获取的是一个数组 var obj = document.getElementsByName("fav"); console.log(obj) } // ③ document.getElementsByTagName() function getEle3(){ var obj = document.getElementsByTagName("input"); console.log(obj); } function getEle4(){ var father = document.getElementById("regForm"); var sons = father.childNodes; // 获取指定位置 console.log(sons[1]); // firstChild 获取第一个 console.log(father.firstChild); // lastChild 获取最后一个 console.log(father.lastChild); } // 子父关系 parentNode function getEle5(){ var son = document.getElementById("userid"); console.log(son.parentNode) } // 兄弟关系 nextSibling 下一个对象 //previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素 function getEle6(){ var bro = document.getElementById("userid"); console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling); bro.previousSibling } function getField1(){ var obj = document.getElementById("nickid"); //console.log(obj.type); //将昵称的样式改为password //obj.type = "password"; var objval = obj.getAttribute("name"); console.log(objval); obj.setAttribute("abcd","5678"); obj.removeAttribute("type"); // 可以获取改变后的属性 console.log(obj.value) // 只能获取初始定义的属性 console.log(obj.getAttribute("value")); } // 1) 通过对象.innerText 获取标签内部的文本信息 function getText1(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv.innerText); } // 2) 通过对象.innerHTML 获取标签内部的HTML代码 function getText2(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv.innerHTML); } // 添加文本 function getText3(){ var myDiv = document.getElementById("myDiv"); myDiv.innerText = "<img src='1.jpg' />"; } // 添加代码 function getText4(){ var myDiv = document.getElementById("myDiv"); myDiv.innerHTML = "<img src='1.jpg' />"; } </script> </head> <body> <button onclick="getEle1();">点我测试1</button> <button onclick="getEle2();">点我测试2</button> <button onclick="getEle3();">点我测试3</button> <button onclick="getEle4();">点我测试4</button> <button onclick="getEle5();">点我测试5</button> <button onclick="getEle6();">点我测试6</button> <hr/> <button onclick="getField1();">属性测试1</button> <hr/> <button onclick="getText1();">文本测试1</button> <button onclick="getText2();">文本测试2</button> <button onclick="getText3();">文本测试3</button> <button onclick="getText4();">文本测试4</button> <hr/> <form id="regForm"> 用户名:<input id="userid" type="text" name="username"><br/> 密码:<input type="password" name="password"><br/> 昵称:<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/> 性别:男<input type="radio" name="gender" value="nan"> 女<input type="radio" name="gender" value="nv"><br/> 爱好:狗<input type="checkbox" name="fav" value="dog"> 猫<input type="checkbox" name="fav" value="cat"> 羊驼<input type="checkbox" name="fav" value="yt"><br/> <input type="submit" value="注册"> </form> <div id="myDiv"><b>hello</b></div> </body>
<script type="application/javascript"> function changeDom1(){ var ipt=document.createElement("input"); } </script> <button onclick="changeDom1();">创建结点对象</button>
function changeDom2() { var father = document.getElementById("regForm"); var ipt = document.createElement("input"); ipt.type = "text"; father.appendChild(ipt); } <button onclick="changeDom2();">追加子结点对象</button>
function changeDom3() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.insertBefore(newChild, refChild); } <button onclick="changeDom3();">插入子结点对象</button>
function changeDom4() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.replaceChild(newChild, refChild); } <button onclick="changeDom4();">替换子结点对象</button>
function changeDom5() { var father = document.getElementById("regForm"); var refChild = document.getElementById("nickid"); father.removeChild(refChild); } <button onclick="changeDom5();">删除子结点对象</button>
<style type="text/css"> .addstyle{ color: red; font-size: 72px; text-decoration: underline; } </style> <script type="application/javascript"> /* 5.动态改变元素的css样式 1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称 2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在) */ function fontGreater(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv); myDiv.style.fontSize = "36px"; myDiv.style.fontFamily = "宋体"; } function changeFont(){ var myDiv = document.getElementById("myDiv"); myDiv.className = "addstyle"; //myDiv.setAttribute("class","addstyle"); } </script> </head> <body> <button onclick="fontGreater()">放大字体</button> <button onclick="changeFont()">添加样式</button> <div id="myDiv" >你好世界!</div> </body>
原文链接:https://www.cnblogs.com/aknife/p/10816853.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Js操作DOM元素及获取浏览器高宽的简单方法 2019-12-31
- documentElement正确取得当前可见区域的大小的方法 2019-12-21
- javascript IE中的DOM ready应用技巧 2019-11-17
- Document 对象的常用方法 2019-08-29
- IE DOM实现存在的部分问题及解决方法 2019-08-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash