<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>
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论