掌握 JavaScript 的核心之一：DOM，能够熟悉DOM相关操作，了解JavaScript事件机制

一、使用getElementById()、getElementsByTagName()、childNodes、parentNode找DOM

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>找到Dom-getElementBy—</title>

 </head>

 <body>

     <div id="wrapper">

         <div id="news-top" class="section">

             <h3>Some title</h3>

             <div class="content">

                 <ul>

                     <li><span>HTML</span><a href="">Some Link1</a></li>

                     <li><span>JS</span><a class="active" href="">Some Link2</a></li>

                     <li><span>CSS</span><a href="">Some Link3</a></li>

                     <li><span>JS</span><a href="">Some Link4</a></li>

                 </ul>

             </div>

             <img src="">

             <p class="">Some Text</p>

         </div>

         <div id="news-normal" class="section">

             <h3>Some title</h3>

             <div class="content">

                 <ul>

                     <li><span>HTML</span><a href="">Some Link1</a></li>

                     <li><span>HTML</span><a href="">Some Link2</a></li>

                     <li><span>JS</span><a class="active" href="#">Some Link3</a></li>

                     <li><span>CSS</span><a href="">Some Link4</a></li>

                     <li><span>JS</span><a class="active" href="#">Some Link1</a></li>

                 </ul>

             </div>

             <img src="">

             <p class="">Some Text</p>

         </div>

     </div>

     <script>

         function getAllListItem() {

             // 返回页面中所有li标签

             var list = document.getElementsByTagName("li");

             console.log(list);

         }

         function findAllHtmlSpanInOneSection(sectionId) {

             // 返回某个section下所有span中内容为HTML的span标签

             var section = document.getElementById(sectionId).getElementsByTagName("span");

             for (i = 0; i < section.length; i++) {

                 if (section[i].innerHTML === "HTML") {

                     console.log(section[i]);

                 }

             }

         }

         function findListItem(sectionId, spanCont) {

             // 返回某个section下，所有所包含span内容为spanCont的LI标签

             var section = document.getElementById(sectionId).getElementsByTagName("span");

             for (i = 0; i < section.length; i++) {

                 if (section[i].innerHTML === spanCont) {

                     console.log(section[i].parentNode);

                 }

             }

         }

         function getActiveLinkContent(sectionId) {

             // 返回某个section下，class为active的链接中包含的文字内容

             var section = document.getElementById(sectionId).getElementsByClassName("active");

             for (i = 0; i < section.length; i++) {

                 console.log(section[i].innerHTML);

             }

         }

         getAllListItem();

         findAllHtmlSpanInOneSection("news-top");

         findAllHtmlSpanInOneSection("news-normal");

         findListItem("news-top", "JS");

         findListItem("news-normal", "JS");

         findListItem("news-normal", "CSS");

         getActiveLinkContent("news-top");

         getActiveLinkContent("news-normal");

     </script>

 </body>

 </html>

二、使用querySelector及querySelectorAll找DOM

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>找到Dom-querySelector—</title>

 </head>

 <body>

     <div id="wrapper">

         <div id="news-top" class="section">

             <h3>Some title</h3>

             <div class="content">

                 <ul>

                     <li><span>HTML</span><a href="">Some Link1</a></li>

                     <li><span>JS</span><a class="active" href="">Some Link2</a></li>

                     <li><span>CSS</span><a href="">Some Link3</a></li>

                     <li><span>JS</span><a href="">Some Link4</a></li>

                 </ul>

             </div>

             <img src="">

             <p class="">Some Text</p>

         </div>

         <div id="news-normal" class="section">

             <h3>Some title</h3>

             <div class="content">

                 <ul>

                     <li><span>HTML</span><a href="">Some Link1</a></li>

                     <li><span>HTML</span><a href="">Some Link2</a></li>

                     <li><span>JS</span><a class="active" href="#">Some Link3</a></li>

                     <li><span>CSS</span><a href="">Some Link4</a></li>

                     <li><span>JS</span><a class="active" href="#">Some Link1</a></li>

                 </ul>

             </div>

             <img src="">

             <p class="">Some Text</p>

         </div>

     </div>

     <script>

         function getAllListItem() {

             // 返回页面中所有li标签

             var list = document.querySelectorAll("li");

             for (i = 0; i < list.length; i++) {

                 console.log(list[i]);

             }

         }

         function findAllHtmlSpanInOneSection(sectionId) {

             // 返回某个section下所有span中内容为HTML的span标签

             var section = document.querySelector("#" + sectionId).querySelectorAll("span");

             for (i = 0; i < section.length; i++) {

                 if (section[i].innerHTML === "HTML") {

                     console.log(section[i]);

                 }

             }

         }

         function findListItem(sectionId, spanCont) {

             // 返回某个section下，所有所包含span内容为spanCont的LI标签

             var section = document.querySelector("#" + sectionId).querySelectorAll("span");

             for (i = 0; i < section.length; i++) {

                 if (section[i].textContent === spanCont) {

                     console.log(section[i].parentNode);

                 }

             }

         }

         function getActiveLinkContent(sectionId) {

             // 返回某个section下，class为active的链接中包含的文字内容

             var section = document.querySelector("#" + sectionId).querySelectorAll(".active");

             for (i = 0; i < section.length; i++) {

                 console.log(section[i].textContent);

             }

         }

         getAllListItem();

         findAllHtmlSpanInOneSection("news-top");

         findAllHtmlSpanInOneSection("news-normal");

         findListItem("news-top", "JS");

         findListItem("news-normal", "JS");

         findListItem("news-normal", "CSS");

         getActiveLinkContent("news-top");

         getActiveLinkContent("news-normal");

     </script>

 </body>

 </html>

三、注意点：

innerText  与 innerHtml 都是打印标签之间的文本信息

1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent

2、innerHtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印

3、但是使用innerText 会有兼容性，低版本的火狐浏览器不支持使用，而是支持使用textContent，因此我们需要封装一个兼容版本，以及调用方法

  　　　　var box = document.getElementById("box");

         调用方法

         var str = getText(box);

         console.log(str);

         /**

          * 封装了一个获取标签之间的文本信息兼容版本函数

          * @param element 标签对象

          * @returns {*}

          */

         function getText(element) {

             if(element.innerText) {

                 return element.innerText;   //IE8及之前的浏览器支持，现在两者都支持

             }else {

                 return element.textContent; //低版本的火狐支持

             }

         }

Js的核心：找到DOM的更多相关文章

  1. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  2. Node.js的核心与红利(zz)

    唯有明晰历史,才能了然当下,预知未来.作者从历史角度解读Node.js,帮助读者透过猜忌和谣言,看清真实的Node.js,了解Node.js的核心与红利. 令人惴惴不安的Node.js 我们越来越频繁 ...

  3. JS 语言核心（JavaScript权威指南第六版）（阅读笔记）

    前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...

  4. js下 Day01、DOM对象，BOM浏览器对象模型

    一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...

  5. vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  6. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  7. legend---九、js的核心是什么

    legend---九.js的核心是什么 一.总结 一句话总结:js里面一切东西都是对象,包括数组,字符串,所以你就知道数组啊,对象啊,的很多东西怎么用了 1.js如何合并两个数组? concat,ar ...

  8. 原生Js监听普通dom尺寸变化

    原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...

  9. js沉思录一：js的核心概念

    js的核心概念: 原型.对象(Object).函数(Function); 原型:路由路径上非叶子结点的对象: 对象:无序属性(包括函数)的集合: 函数:函数上下文的集合: 原型: 原型的创建.指定.修 ...

随机推荐

  1. Oracle数据库count的一些操作

    --统计数量 select count(*) from table; --统计某一列的数量(去空) select count(col) from table; --统计某一列的值大于或小于另一个值的数 ...

  2. 2016级算法第五次上机-E.AlvinZH的学霸养成记IV

    1039 AlvinZH的学霸养成记IV 思路 难题,最大二分图匹配. 难点在于如何转化问题,n对n,一个只能攻击一个,判断是否存在一种攻击方案我方不死团灭对方.可以想到把所有随从看作点,对于可攻击的 ...

  3. Little Sub and Traveling（杭师大第十二届校赛E题） 欧拉回路

    题目传送门 题目大意: 从0出发,每次只能跳到(i*2)%n或者(i*2+1)%n,求字典序最大的哈密顿回路. 思路: 首先n为奇数时无解,先来证明这一点. 先假设n为奇数,若要回到原点,则必定有一步 ...

  4. grep练习

    1.查找特定字符串 [root@server3 mnt]# cat passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/no ...

  5. VS中的DataPager分页

    微软的DataPager分页功能很强大,不要设置数据库存储过程,只要添加个DataPager控件,关联下要分页的控件,简单设置就可以有不错的分页效果.当然要有更理想的效果还是要前台和后台处理下. wi ...

  6. js 常用基本知识

    Object.isObject = function(obj){ return obj != null && typeof obj === 'object' && Ar ...

  7. oracle使用已有vid快速新建虚拟机

    有时候需新建虚拟机,但是每一次新建都花费很多时间,这里在oracle中快速新建虚拟机,只需要复制已有的vdi,然后修改uuid即可   windows下在cmd下输入命令 cd C:\Program ...

  8. sort sorted() reverse() reversed() 的区别

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...

  9. RESTful简单介绍

    1 什么是restful Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. 资源:互联网所有的事物都 ...

  10. 【CSS】 一个简单的导航条

    今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...