Js的核心：找到DOM

掌握 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的更多相关文章

窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...
Node.js的核心与红利(zz)
唯有明晰历史,才能了然当下,预知未来.作者从历史角度解读Node.js,帮助读者透过猜忌和谣言,看清真实的Node.js,了解Node.js的核心与红利. 令人惴惴不安的Node.js 我们越来越频繁 ...
JS 语言核心（JavaScript权威指南第六版）（阅读笔记）
前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...
js下 Day01、DOM对象，BOM浏览器对象模型
一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...
vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想
一:MVVM框架 MVVM框架的应用场景: 1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验二:vue.js的核心思想 (一):数据驱动 ( ...
js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
legend---九、js的核心是什么
legend---九.js的核心是什么一.总结一句话总结:js里面一切东西都是对象,包括数组,字符串,所以你就知道数组啊,对象啊,的很多东西怎么用了 1.js如何合并两个数组? concat,ar ...
原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在目标 dom 里面包裹一个同等大小的 ...
js沉思录一：js的核心概念
js的核心概念: 原型.对象(Object).函数(Function); 原型:路由路径上非叶子结点的对象: 对象:无序属性(包括函数)的集合: 函数:函数上下文的集合: 原型: 原型的创建.指定.修 ...

随机推荐

javascript 私有化属性，和公共属性
function TestClassA(name, number) { this.name = name; //public this.number = number; //public var ac ...
P3866 [TJOI2009]战争游戏最小割
$ \color{#0066ff}{ 题目描述 }$ 小R正在玩一个战争游戏.游戏地图是一个M行N列的矩阵,每个格子可能是障碍物,也可能是空地,在游戏开始时有若干支敌军分散在不同的空地格子中.每支敌军 ...
C#找出接口的所有实现类并遍历执行这些类的公共方法
//这里找出了实现IOutputArray接口的所有类 private void FindAllClass() { var types = AppDomain.CurrentDomain.GetAss ...
vue混入函数问题
vue开发时,遇到个问题, import mxTable from "#mixin/table"; 导入了一个混入mxTable,但是该混入函数中import了其他的js代码,此时 ...
FreeRTOS-06任务运行时间信息统计
根据正点原子FreeRTOS视频整理单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 * 1. 要使用vTaskGetRunTimeStats()函数,需满足以下条件: * ...
用matplotlib绘制图像
实例一: import numpy as np import matplotlib.pyplot as plt x=np.linspace(0,6,100) y=np.cos(2*np.pi*x)*n ...
删除centos 7 系统自带的 openjdk
1. 查看是否系统自带openjdk. java -version 2. 查看jdk位置 rpm -qa | grep java 3. 删除jdk rpm -e --nodeps java--ope ...
在 Linux 服务器上部署 nginx 之后不能访问
原文地址:https://blog.csdn.net/lipeigang1109/article/details/73295373 解决办法:https://jingyan.baidu.com/art ...
服务端模拟http服务请求客户端
try { InputStream in = req.getInputStream(); int i = -1; ByteArrayOutputStream out = new ByteArrayOu ...
hive DML
1.load files into tables 把文件中的数据加载到表中(表必须先建好) 语法是: load data [local] inpath 'filepath' [overwrite] i ...

Js的核心：找到DOM

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

随机推荐

热门专题