js的element对象

来源：互联网发布：谷歌的python课程编辑：程序博客网时间：2024/06/06 19:03

案例一：在末尾添加节点

1.获取到ul标签

2.创建li标签

3.创建文本document.createTextNode("文本内容");

4.把文本添加到li下面appendChild()方法

5.把li添加到ul末尾

<html><head><title>aaa</title></head><body>  <ul id="ulid"><li>111</li><li>222</li><li>333</li>  </ul>  <br/>  <input type="button" value="add" onclick="add1()"/><hr/><script type="text/javascript"> function add1(){var ul1=document.getElementById("ulid");//获取到标签//创建标签var li1=document.createElement("li");//创建文本var text1= document.createTextNode("4444");//将文本加入到li下面li1.appendChild(text1);//吧li加入到ul下面ul1.appendChild(li1); }</script></body></html>

2.element元素对象

要操作element对象首先要获取到该对象，使用document里面的相应的方法获取

获取属性里面的值getAttribute("属性名称");

setAttribute()：设置属性值

removeAttribute()：删除属性，但不能吧value值删除

<body>  <input type="text"name="name1" id="inputid" value="aaa"/>  <br/>  <hr/><script type="text/javascript"> //先要获取到input标签 var input1=document.getElementById("inputid"); //alert(input1.value);// alert(input1.getAttribute("value")); //alert(input1.getAttribute("class")); alert(input1.getAttribute("class")); input1.setAttribute("class","haha");  alert(input1.getAttribute("class")); alert(input1.getAttribute("name")); input1.removeAttribute("name"); alert(input1.getAttribute("name"));</script></body>

相要获取标签下面的子标签

使用属性childNodes，但这个属性兼容性差

getElementsByTagName();

<body>  <ul id="ulid"><li>1111</li><li>2222</li>   </ul>  <br/>  <hr/><script type="text/javascript"> //获取ul下面的所有子标签 var ulid1=document.getElementById("ulid"); //获取ul下面的子标签 var lis=ulid1.childNodes; alert(lis.length);var lis1= ulid1.getElementsByTagName("li");alert(lis1.length);</script></body>

阅读全文

0 0