掌握 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. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...

  2. Levenshtein字符串距离算法介绍

    Levenshtein字符串距离算法介绍 文/开发部 Dimmacro KMP完全匹配算法和 Levenshtein相似度匹配算法是模糊查找匹配字符串中最经典的算法,配合近期技术栏目关于算法的探讨,上 ...

  3. 二叉树的遍历python 代码

    __author__ = "WSX" class Node: def __init__(self, val = None, left = None, right = None): ...

  4. Xshell和Xftp登陆WSL

    参考:https://zhuanlan.zhihu.com/p/34950508 关键步骤: 1. 下载Xshell和Xftp 2.  拷贝ssh配置文件 sudo cp /etc/ssh/sshd_ ...

  5. L1-2 倒数第N个字符串 （15 分）真坑

    给定一个完全由小写英文字母组成的字符串等差递增序列,该序列中的每个字符串的长度固定为 L,从 L 个 a 开始,以 1 为步长递增.例如当 L 为 3 时,序列为 { aaa, aab, aac, . ...

  6. 人机交互print

    python两种输出类型: 1· 表达式语句,python理解的 #  repr() 2· print() 结果是给用户看的      # str()  >>> "Hell ...

  7. JS实现跨域请求数据--CORS

    https://www.cnblogs.com/cjw-ryh/p/7674038.html?utm_source=debugrun&utm_medium=referral

  8. linux CentOS中文输入法安装及设置

    摘自百度空间,不错,一次搞定! centos 6.3用yum安装中文输入法 1.需要root权限,所以要用root登录 ,或su root 2.yum install "@Chinese S ...

  9. Linux下与Windows下开发软件

    Linux下开发程序可以完全发挥自己的聪明才智,因为系统内核是完全开放的.Windows下开发程序就稍微郁闷一点,不论何种语言都必须在调用系统API的基础上开发,因为系统内核是不开放的. 这两种系统正 ...

  10. idea validation code

    K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...