掌握 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. springboot 搭建 简单 web项目 【springboot + freemark模板 + yml 配置文件 + 热修复 + 测试用例】附源码

    项目 地址:  https://gitee.com/sanmubird/springboot-simpleweb.git 项目介绍: 本项目主要有一下内容: 1: springboot yml 配置 ...

  2. 两种 js下载文件的步骤

    ----------------------------------引用地址链接------------------------------------------------- http://www ...

  3. leetcode-747-Largest Number At Least Twice of Others（求vector的最大值和次大值）

    题目描述: In a given integer array nums, there is always exactly one largest element. Find whether the l ...

  4. 数据库--sql文件

    sql 脚本是包含一到多个 sql 命令的 sql 语句集合 使用 Linux: mysqldump 命令 1.导出数据和表结构: mysqldump -u 用户名 -p 数据库名称 > nam ...

  5. appium+android各配置参数获取'platformName'、'platformVersion'、appActivity、deviceName、webdriver.Remote

    图中1的获取--'platformName'.'platformVersion' 点击appium右上角的运行按钮,可通过上面查看platformName 和 platformVersion 平台版本 ...

  6. 洛谷 P2053 [SCOI2007]修车（最小费用最大流）

    题解 最小费用最大流 n和m是反着的 首先, \[ ans = \sum{cost[i][j]}*k \] 其中,\(k\)为它在当前技术人员那里,排倒数第\(k\)个修 我们可以对于每个技术人员进行 ...

  7. Sum(欧拉降幂+快速幂)

    Input 2 Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input file consists of multiple test cas ...

  8. 阿里云redisA迁移redisB迁移

    ./redis-port restore --input=./xxx.rdb --target=r-2zedc7c8e0557dsf4.redis.rds.aliyuncs.com:6379 --au ...

  9. Qt4.8.5移植

    这两天搞了Qt移植 因为不小心 耽误了挺多时间 但是也比较好的掌握了   现在记录一下 准备工具: tslib-1.16 qt-everywhere-opensource-src-4.8.5.tar ...

  10. php的魔术常量以及类的模式方法

    魔术方法class A { const PI = 3.14; static $type = 'type1'; public $a1='a1'; public function fun1(){ var_ ...