JS中的DOM基础入门_dom基础知识教程

一、入口函数;  (1) $(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq  (2) $(window).load:在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq  (3) window.onload=function(){}:必须等到页面内包括

JS中的DOM基础入门

一、入口函数;

JS中的DOM基础入门_dom基础知识教程

  (1) $(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq

  (2) $(window).load:在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq

  (3) window.onload=function(){}:必须等到页面内包括图片的所有元素加载完毕后才能执行;js

二、dom选择器:

  (1) .getElementById();

  (2) .getElementsByTagName()[];  标签名

  (3) .getElementsByName()[];  只有部分标签name生效

  (4) .getElementsByClassName()[];  类名

  (5) .querySelector();  CSS选择器(1个),非实时。

  (6) .querySelectorAll();  CSS选择器(1组),非实时。

三、节点的类型:

  (1) 元素节点—-1

  (2) 属性节点—-2

  (3) 文本节点—-3

  (4) 注释节点—-8

  (5) document—-9

  (6) DocumentFragment—-11

四、节点的四个属性:

  (1) .nodeName;  //元素的标签名,以大写表示,只读

  (2) .nodeValue;  //Text或Comment节点的文本内容,可读可写

  (3) .nodeType;  //该节点的类型,只读

  (4) .attributes;  //Element节点的属性集合

五、节点方法:

  Node.hasChildNodes();  //检查元素节点是否含有子节点

  注:此子节点包含文本节点等

六、Element节点的属性:

  (1) .innerHTML  例:div.innerHTML += “<h1>ABC</h1>”

  (2) .innerText (火狐不兼容)/textContent (ie6不兼容)

七、Element节点的方法:

  (1) ele.setAttribute(“属性名”,”属性值”);

  (2) ele.getAttribute(“属性名”);

  注:dom.className;可直接读写class;

  (3) classList属性:用于操作类属性;

    classList.add(“类名1″,”类名2”,….);

    classList.contains(“类名”); 判断是否包含;

    classList.remove(“类名1″,”类名2”,….);

    classList.toggle(“”);  切换

八、遍历节点树:

  (1) .parentNode;  父节点(最顶端为document)

  (2) .childNodes;  子节点们

  (3) .firstChild;  第一个子节点

  (4) .lastChild;  最后一个子节点

  (5) .nextSibling;  后面一个兄弟节点

  (6) .previousSibling;  前面一个兄弟节点

九、基于元素节点的遍历节点树:

  (1) .parentElement;  父元素节点

  (2) .childeren;  元素子节点们

  (3) node.childElementCount===node.children.length

  (4) .firstElementChild;

  (5) .lastElementChild;

  (6) .nextElementSibling;

  (7) .previousElementSibling; 

十、DOM扩展:

  (1) .getElementById;  //定义在Document.prototype上,

    即Element节点上不能使用;

  (2) .getElementsByName;  //定义在HTML.Document.prototype上,

    即非HTML中的document不能用(XML DOC; Ele);

  (3) .getElementsByTagName;  //定义Document.prototype和

    Element.prototype;

  (4) <body>;  document.body;

        <head>;  document.head;

        <HTML>;  document.documentElement;

  (5) .getElementsByClassName\.querySelectorAll\.querySelector在

    Document.proyotype和Element.prototype中均有定义;

海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • 几个数据持久化框架Hibernate、JPA、Mybatis、JOOQ和JDBC Template的比较小白攻略_数据入门知识

    因为项目需要选择数据持久化框架,看了一下主要几个流行的和不流行的框架,对于复杂业务系统,最终的结论是,JOOQ是总体上最好的,可惜不是完全免费,最终选择JDBC Template。Hibernate和Mybatis是使用最多的两个主流框架,而JOOQ、Ebean等小众框架则知道的人不多,但也有很多独特的优点;而JPA则是一组Java持久层Api的规范,Spr

    2020/03/31
  • npm版本号以及其更新的策略基础知识入门_更新菜鸟知识

    本文主要是说明 package.json 中 npm 版本规则以及 npm install 和 npm update 的区别,适合新手和老鸟复习。 npm 中的版本号规则版本的格式 major.minor.patch 主版本号.次版本号.修补版本号版本匹配规则version 必须匹配某个版本 如:1.1.2,表示必须依赖 1.1.2

    2020/03/24
  • 使用FileSave.js将网页内容保存到文件使用帮助_文件菜鸟教程网

    在写Chrome extension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个 a 标签,然后将连接与Blob对象关联并放到 a标签的href或者download(H5)属性中。具体参照Stack Overflow方案。然而,有人已经将保存文件的功能封装好了,可以很方便的保存各种类型的文件。

    2020/03/24
  • parsedown入门百科_高效Markdown解析器

    parsedown入门百科 官方网址:http://parsedown.org GitHub:https://github.com/erusev/parsedown 简介描述:高效…

    2020/03/06
  • Sass和Less的区别?小白知识_sass使用教程

    这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less? 什么是Sass和Less?Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为

    2020/03/29
  • canvas 环形图绘制攻略教程_canvas小白指南

    主要用到几个知识点1、lineCap:如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt(线段末端以方形结束), round (线段末端圆形结束)and square(线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)。默认值是 butt。 2、圆弧起始点与结束点的设置在本里中设置方式 ctx.arc(110,

    2020/03/30
  • 搜狐科技入门基础知识_聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台

    搜狐科技入门基础知识 官方网址:http://it.sohu.com/ 简介描述:聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台 搜狐科技是聚合互联网、智能硬件、创业…

    2020/03/06
  • 如何构建网络安全策略?入门基础知识_安全菜鸟教程网

    组织面临着对其信息系统和数据的诸多威胁。了解网络安全的所有基本要素是攻克这些威胁的第一步。网络安全是确保信息的完整性、保密性和可用性(ICA)的实践。它代表了防御和从诸如硬盘驱动器故障或断电等事故中恢复的能力,以及抵御敌人攻击的能力。后者包括从脚本kiddies到黑客和能够执行高级持久威胁(advanced persistent threats, apt)的

    2020/03/26
  • 大前端时代下的热修复平台建设入门基础知识_前端菜鸟教程下载

    随着移动需求的增加、移动项目的拓展,如果移动端应用出现 Bug 不能及时得到修复,影响的不仅仅是用户体验,还会造成业务上的损失,因此,建立一套完整的热修复平台迫在眉睫。基于此,本文作者所在的搜狗商业应用研发团队构建了一套移动热修复服务中间件平台, 本文 从系统架构到主要流程对解决方案进行了详细的呈现,无论是 iOS、Android、RN、Flutter 都可

    2020/03/23
  • JS算法题之罗马数字转整数基础知识_算法题基础教程

    题目描述罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符 数值
    I 1
    V 5
    X 10
    L 50
    C 100
    D 500
    M 1000例如, 罗马数字

    2020/03/29
  • vue中provide和inject 用法入门基础_用法入门基础知识

    一、概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻

    2020/03/23
  • 网站建设目标是什么?及对网站质量评价标准基础入门_网站基础知识入门

    网站建设初期的目标营销渠道中,主要分为导流、沟通、交易和服务四个阶段有了你完成交易的用户,售后问题,包括电话,面对面的沟通,网站可以带来流量,并且使用一个核心关键词,订单可能会产生,这就是企业网站的力量。网站的内容可以粗略地判断,内容质量越高,旧用户越多,新用户将再次访问你的网站,访问者对网站的信任度越高,页面上的广告也越多,许多网站管理员都急于通过收集和虚

    2020/03/23
  • Recompressor基础教程_在线最佳图片压缩工具

    Recompressor基础教程 官方网址:https://recompressor.com/ 简介描述:在线最佳图片压缩工具 Recompressor是一个追求将图像进行最佳压缩…

    2020/03/10
  • HTML5新特性总结基础知识_html5入门教程

    HTML5发布于2014年,设计目的是为了在移动端支持多媒体。一、语义化标签

    web知识大全

    html4

    html4是上一代web语言标准……

    <secti

    2020/03/31
  • JavaScript错误处理权威指南基础知识教程_异常指南攻略

    JavaScript 错误和一般处理 throw new Error(‘something went wrong’) 会在 JavaScript 中创建一个错误实例,并停止脚本的执行,除非你对错误做了一些处理。当你作为 JavaScript 开发者开启自己的职业生涯时,你自己很可能不会这样做,但是,你已经从其他库(或运行时)那里看到了,例如,类似“Refer

    2020/04/03
  • 你的下一款应用可能没有后端入门攻略_应用小白教程

    今天,我们谈一谈JAMStack 和它的未来演变。历史总是喜欢重演。我在 1999 年建立了自己的第一个网站,使用的是当时的 Web 高手(这里我还没法用“开发者”这个词)能接触到的最先进技术:所见即所得的编辑器。对我(以及许多其他许多人!)而言,这种技术最早指的就是 微软 FrontPage ——现在回想起来,我的脸上还会浮现出掺杂着怀旧和羞愧的尴尬笑容。

    2020/03/23