Blogger Information
Blog 25
fans 0
comment 0
visits 13658
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
DOM元素的获取及遍历方法实例
安超
Original
460 people have browsed it

DOM元素的获取方法

DOM元素的获取方法主要由获取某个元素,获取子元素,第一个子元素,最后一个子元素和某一个子元素等。常用的获取方法见下面的例子。

  1. <ul class="list">
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. <li>item6</li>
  8. <li>item7</li>
  9. <li>item8</li>
  10. </ul>
  11. <!-- 获取表单中中元素的值document.forms.inputname.value -->
  12. <form action="#" method="post" name="myForm">
  13. <fieldset>
  14. <caption>表单框</caption>
  15. <div>
  16. <label for="age">输入年龄:</label>
  17. <input type="number" name="age" id="age" value="20">
  18. </div>
  19. <br>
  20. <div>
  21. <label for="surname">输入姓名:</label>
  22. <input type="text" name="surname" id="surname" >
  23. </div>
  24. <br>
  25. <div>
  26. <label for="date">选择日期:</label>
  27. <input type="date" name="date" id="dat3">
  28. </div>
  29. <br>
  30. <div>
  31. <label>请选择城市</label>
  32. <select name="city">
  33. <option value="beijing">北京</option>
  34. <option value="shijiazhuang">石家庄</option>
  35. <option value="jinan">济南</option>
  36. <option value="hefei">合肥</option>
  37. <option value="shenyang">沈阳</option>
  38. </select>
  39. </div>
  40. <br>
  41. <button type="button" onclick="acquire()">提交</button>
  42. <button type="reset">重置</button>
  43. </fieldset>
  44. </form>
  1. <script>
  2. let ul = document.querySelector(".list");
  3. console.log(ul);
  4. // 获取ul第一个子元素
  5. let firstchild = ul.firstElementChild;
  6. console.log(firstchild.textContent);
  7. // 获取ul第一个子元素的下一个元素
  8. let nextFirst = firstchild.nextElementSibling;
  9. console.log("The next element of the first element is: " +nextFirst.textContent);
  10. // 获取ul的最后一个子元素
  11. let lastChild = ul.lastElementChild;
  12. console.log(lastChild.textContent);
  13. // 获取最有一个子元素前边的元素
  14. let previousElement = lastChild.previousElementSibling;
  15. console.log("The previous element of the last element is: " +previousElement.textContent);
  16. // ul中是否还有某个子元素contains()
  17. console.log(ul.contains(firstchild));
  18. // 获取ul所有子元素的内容
  19. let child = ul.children;
  20. console.log(child);
  21. [...child].forEach(element => console.log(element.textContent));
  22. //获取ul的第X个子元素
  23. let fifthElement = document.querySelector('.list>li:nth-of-type(5)');
  24. console.log("The fifth element is : " + fifthElement.textContent);
  25. let fifthElement_2 = ul.children[1];
  26. console.log("The second way to acquire thefifth element : "+ fifthElement_2.textContent);
  27. // 获取表单元素
  28. // 1.获取表单
  29. let forms = document.forms.myForm;
  30. console.log(forms);
  31. // 2.获取年龄框
  32. function acquire(){
  33. // 获取表单中元素的值 forms.input-name.value
  34. console.log(`The age you inut is :${forms.age.value}`);
  35. console.log(`The surname you input is : ${forms.surname.value}`);
  36. console.log(`The date you choose is:${forms.date.value}`);
  37. console.log(`The city you choose is:${forms.city.value}`);
  38. }
  39. </script>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:完成的很好, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!