掌握 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. 通过Nginx部署Django

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...

  2. react的一些思考

    在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了 开始做的时候整体框架已经搭建好了,这让我有点小失落,我还以为我要开始搭框架了呢,没事,搭的也挺好的. 有了 ...

  3. HTML中title前面小图标和网站收藏现实的图标

    网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...

  4. flask_restful(转载）

    flask插件系列之flask_restful设计API 前言 flask框架默认的路由和视图函数映射规则是通过在视图函数上直接添加路由装饰器来实现的,这使得路由和视图函数的对应关系变得清晰,但对于统 ...

  5. Rstudio常用且不熟快捷键 “原版+中文” 整理

  6. python全栈开发_day8_文件的多种读写方式及游标

    一:文件的多种读写方式 主方式:w    r    a 从方式:t     b    + 了解方式:x    u 1)按t(按照字符进行操作): with open("data_1.txt& ...

  7. 剑指offer——面试题17：打印从1到最大的n位数

    用字符串模拟加法: #include"iostream" #include"string.h" using namespace std; bool AddOne ...

  8. oracle--dump 事务槽

    01,创建环境 SQL> create table t3 (id int); Table created. SQL); row created. SQL); row created. SQL); ...

  9. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

  10. Python数据类型（元组）

    文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 元组 Python的元组与列表类似 ...