nothings0o 2014-03-07
所有的HTML元素(标签)被定义为对象,对象具有一定的方法和属性。
这些方法都是非常常见且有用的,我在这里不做过多解释,分别举例如下:上图中的方法在下面的例子中均有涉及,请仔细查找!
getElementById():通过元素的ID属性获取到唯一的元素
<div id="myid"></div> <script> var mydiv=document.getElementById("myid"); mydiv.innerHTML="<h1>hello world!</h1>"; </script>
getElementsByTagName():通过元素的名称获取到所有该元素名的元素集合,该方法获取的是元素数组。
<div></div> <script> var mydivs=document.getElementsByTagName("div"); mydivs[0].innerHTML="<h1>hello world!</h1>"; </script>
getElementsByClassName():同理,此方法是通过元素的CLASS属性获取元素集合
<div class="mydiv"></div> <script> var mydivs=document.getElementsByClassName("mydiv"); mydivs[0].innerHTML="<h1>hello world!</h1>"; </script>
createElement():创建HTML元素,即创建DOM对象,一般和createAttribute(),createTextNode(),appendChild(),replaceChild()共同使用
<body> <div id="mydiv1">hello,mydiv1</div> <script> var mydiv2=document.createElement("div");//创建一个div节点 var myh1=document.createElement("h1");//创建一个h1节点 var mytext=document.createTextNode("hello world!!!");//创建一个文本节点 myh1.appendChild(mytext);//将文本节点添加到h1标签中 mydiv2.appendChild(myh1);//将h1节点添加到div标签中 //上面4行的操作等价于下面注释掉的一行的操作 //mydiv2.innerHTML="<h1>hello world!</h1>"; document.getElementsByTagName("body")[0].appendChild(mydiv2);//将div标签添加到body中 </script> </body>
<body> <div id="mydiv1">hello,<b>mydiv1</b></div> <script> var mydiv2=document.createElement("div");//创建一个div节点 mydiv2.innerHTML="<h1>hello world!</h1>"; var x=document.getElementsByTagName("div")[0]; x.replaceChild(mydiv2,x.firstChild.nextSibling); //替换mydiv1中的第二个子元素为新建的元素 //hello, 和 <b></b> 是同一级元素,为兄弟元素 //firstChild取得'hello,' 其下一个兄弟元素,即为<b>mydiv1</b> //将<b>mydiv1</b>替换为<div><h1>hello world!</h1></div> </script> </body>
涉及到属性,元素前插入,删除的操作方法示例:
<body> <div id="mydiv1">hello,<b>mydiv1</b></div> <script> var mydiv2=document.createElement("div");//创建一个div节点 mydiv2.innerHTML="<h1>hello world!</h1>"; var x=document.getElementsByTagName("div")[0]; x.insertBefore(mydiv2,x.firstChild); //在hello,的前面添加<div><h1>hello world!</h1></div> x.removeChild(x.firstChild.nextSibling.nextSibling); //删除子元素<b></b> //两种形式给属性设置值 var claNode=document.createAttribute("class"); claNode.value="hello"; x.setAttributeNode(claNode); x.setAttribute("ref","mydiv"); var cla=x.getAttribute("class"); var ref=x.getAttribute("ref"); alert(cla+"-"+ref); </script> </body>