JS控制DOM(一)

作者: 凌晨4点的简书 | 来源:发表于2019-05-29 22:40 被阅读25次

JS与DOM的关系

浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>里的内容JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

BOM对象(把浏览器的地址栏,历史记录,DOM等装在一个对象)

浏览器内部有JS解释器/引擎;在html里的JS代码会被引擎所执行,执行的结果是对DOM对象的操作(即是对节点树内的标签进行操作)

JS添加特效 : 无非就是用JS操作DOM对象而已

JS的引入方式

JS代码可在html中任意位置编写,但浏览器解析代码是从上到下的,需注意此时html是否已经解析该标签,能让JS能否获取该DOM对象,所以有时会把代码放到html的结束前,即是</html>前

直接在html中编写 :<script type="text/javascript">代码</script> 

通过外部引用进来 : <script type=text/javascript src=””></script>

为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部

变量的声明 

var 变量名;变量名区分大小写;不用var声明会污染全局变量;变量名以字母、下划线、美元符号开头,后面部分可数字

函数 即 完成特定功能的代码段;

常用方法

输出语句到html中,使用document.write(“”)

Confire() :消息确认对话框;点击确认返回true

运算符问题

拼接运算符:+ , 如果是数字则相加,是字符则连接 ; 如2+3+‘love’+4+5             //输出5love45

和PHP不同,一般用.

逻辑运算符或 :返回为true的值 ; 如 :

var a = 1;

var b = false;

var d = (a || b);  //d为1

逻辑运算符与 :返回最后面的变量值

var a = 22;

var b=33;

alert(a && b); //输出33

数组与对象的操作

JS中数组的数字键值只能从0开始递增

注意  : 数组中括号,JS中length ; 对象用大括号

Js的内置对象的使用

相关文章

  • JS控制DOM(一)

    JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象...

  • JS基础精粹

    事件 js内置对象 浏览器对象 DOM对象,控制HTML元素

  • Virtual DOM原理

    虚拟dom的实现,主要是通过控制数据来操作dom,Vue,React等框架都有用到,看代码目标dom js要想实现...

  • JS第一天

    ECMAScript js的标准语法 DOM(html每一个标签对应一个对象) html(控制内容)+css(控制...

  • Day7:virtual dom & MVVM

    virtual dom 什么是virtual dom 虚拟dom 用JS模拟DOM结构 DOM变化的对比,放在JS...

  • React 入门(阮一峰教程笔记)

    一 react.js react-dom.js Brower.js react.js 核心库 react-dom....

  • virtual dom

    virtual dom --- 即虚拟dom 1.用js模拟DOM结构 2.DOM变化的对比,放在js层来做(js...

  • DOM

    DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文...

  • JS第七天-03

    DOM DOM树结构关系代码示例: 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建...

  • React初步理解(适合新手理解)

    最近参与一个项目中,运用了react.js来开发,对于用惯DOM操作的前端来说,改变思想来控制所谓的虚拟DOM确实...

网友评论

    本文标题:JS控制DOM(一)

    本文链接:https://www.haomeiwen.com/subject/wgautctx.html