標籤:
1.擷取dom樹的根節點
<script type="text/javascript"> //Document對象的documentElement屬性:直接指向HTML頁面中的根標籤.console.info(document.documentElement); </script>
2.getElementById:根據標籤的id擷取標籤元素和getElementsByTagName根據標籤名擷取標籤,返回的是數組的形式
<script type="text/javascript">//擷取HTML頁面中id="username"標籤.var username = document.getElementById("username");alert(username.value);var inputs = document.getElementsByTagName("input")[0];alert(inputs.value) </script>3.getElementsByNames:根據標籤的name屬性擷取標籤,返回的是數組形式
<body><input type="text" id="username1" name="username" value="username1"><input type="text" id="username2" name="username" value="username2"> </body> <script type="text/javascript"> //擷取HTML頁面中name="username"標籤.var usernames = document.getElementsByName("username");alert(usernames.length);//分別列印出每一個name="username"標籤的value屬性值 </script>有兩個input標籤,因此列印結果是2
4.建立標籤
<body> <ul id="city"> <li id="bj">北京</li><li id="tj">天津</li><li id="nj">南京</li> </ul> </body> <script type="text/javascript"> //建立<li id="sh">上海</li>標籤,將此標籤添加到id="city"標籤下.//1 建立<li id="sh">上海</li>//a 建立<li></li>元素節點var liElement = document.createElement("li");//b 建立"上海"文本節點var text = document.createTextNode("上海");//c 通過元素節點添加子節點的方式,把文本節點添加上.liElement.appendChild(text);//li標籤叫做元素節點,也可以叫做元素.如果當作元素解析的話,屬性就是元素的屬性.liElement.setAttribute("id","sh");//2 擷取id="city"標籤var city = document.getElementById("city");//3 添加city.appendChild(liElement); </script>
關於樹結構的說明:兩種解析dom樹的方式:元素方式和節點方式
元素與節點的區別:
利用元素解釋HTML頁面:
標籤就是元素,文本就是元素的文本,屬性就是元素的屬性.
利用節點解釋HTML頁面:
標籤是元素節點,文本是文本節點,屬性是屬性節點.
著作權聲明:本文為博主原創文章,未經博主允許不得轉載。
javaScript DOM編程