javaScript DOM編程

來源:互聯網
上載者:User

標籤:

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編程

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.