API和Web API

API

应用程序编程接口,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,且又无需访问源码,或理解内部工作机制的细节

API是给程序员提供的一种工具,以便能更轻松的实现想要的功能

Web API

是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM

DOM是(Document Object Model)文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口

可以通过DOM接口改变网页的结构、内容和样式

DOM树

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中所有标签就是元素,DOM中使用element表示
  • 节点:网页中所有内容都是节点(标签、属性、文本、注释)等,DOM中使用node表示

DOM把以上内容都看作对象

获取元素

根据ID获取

getElementById

    <div id="time">2010</div>
<script>
// 参数id是大小写敏感的字符串,返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);//返回object
//打印返回的元素对象,更好的查看里面的属性和方法
console.dir(timer);
</script>

根据标签名获取

        //返回的是获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
//如果页面中只有一个li,返回的还是伪数组,没有则是空的伪数组[]

可以指定父元素内部所有指定标签名的子元素

父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己

        var mm = document.getElementsByTagName('div');
console.log(mm[0].getElementsByTagName('li'));

通过类名获取

document.getElementsByClassName('box');//选择类名为box的对象
//指定选择器的第一个对象
document.querySelector('.box');
document.querySelector('#nav');//选择器必须加符号
//指定选择器的所有对象
document.querySelectorAll('.box');

获取body3元素

document.body;

获取html元素

document.documentElement;//得到整个html标签的内容

事件基础

执行事件的步骤:

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序

常见的鼠标事件

  • onclick 鼠标左键按下
  • onmouseover 鼠标经过
  • onmouseout 鼠标离开
  • onfouse 获得鼠标焦点触发
  • onblur 失去鼠标焦点触发
  • onmousemove 鼠标移动触发
  • onmouseup 鼠标弹起触发
  • onmousedown鼠标按下触发

操作元素

改变元素内容

element.innerText=
element.innerHTML=
  • innerText不识别HTML标签,innerHTML识别,是W3C标准
  • 这两个属性是可读写的
  • 读的时候,innerText会去除标签空格和换行,innerHTML显示是完整的

修改常见元素属性

img.src换图

表单元素的属性操作

type、value、checked、selected、disabled

    <script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function () {
input.value = '被点击了';
// 禁用某个表单不能再点击用disabled
btn.disabled = true;
this.disabled=true;//this指向的是调用者
}
</script>

修改元素样式属性

  1. 使用element.style获得修改元素形式
this.style.backgroundColor='purple';
  • JS里的样式采取驼峰命名法
  • JS修改style样式操作,产生的是行内样式,css权重比较高
  • 一般样式少,功能简单时使用
  1. 使用this.className='',然后在css里定义该类的样式属性
this.className='change';
  • className是保留字,操作元素类名属性
  • 会直接更改类名,覆盖原来的类名
  • 如果想要保留原来的类名,可以使用多类名选择器
this.className='first change';

排他思想

给所有元素全部清除样式后,给当前元素设置样式,顺序不可以颠倒

        var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log('1');
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink'; }
}

自定义属性操作

获取属性值

  1. element.属性 只能获取内置属性值(元素自带)
  2. element.getAttribute('属性') 可以获取自定义属性(程序员自己添加)
  3. H5新增

element.dataset.index或者element.dataset['index'] ie11才开始支持

dataset是一个集合,存放了所有以data开头的自定义属性

更改属性值

element.属性='值'

element.setAttribute=('属性','值');

移除属性值

element.removeAttribute('属性');

H5自定义属性

自定义属性目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中

自定义属性容易引起歧义,不容易判断是元素的内置属性还是自定义属性

一般规定data-开头作为属性名如:data-index

如果自定义属性里面有多个-连接的单词,获取的时候采取驼峰命名法

节点操作

概述

获取元素通常有两种方法

  1. 利用DOM提供的方法获取元素 逻辑性不强
  2. 利用节点层级关系获取元素 利用父子兄节点关系获取元素,逻辑性强但是兼容性较差

网页中所有内容都是节点,在DOM中,节点使用node表示,节点至少拥有nodeType节点类型、nodeName节点名称、nodeValue节点值三个基本属性

  • 元素节点nodetype为1
  • 属性节点2
  • 文本节点3(包括文字、空格、换行等)

实际开发中,节点操作主要操作的是元素节点

通过节点层级获取节点

利用DOM树把节点划分为不同的层级关系,最常见的是父子兄层级

父亲节点

  • node.parentNode

返回的是最近的父节点,如果找不到就返回空

子节点

  • parentNode.childNodes

得到的所有的子节点,包括文本节点(换行也会被计算进去)

如果想获取元素节点,需要专门处理(检测nodeType),一般不提倡使用

  • parentNode.children(非标准),开发中常用

第一个子节点

  • parentNode.firstChild 返回第一个子节点,会返回文本
  • parentNode.firstElementChild 返回第一个子元素节点
  • parentNode.lastElementChild 返回最后一个子元素节点

有兼容性问题,IE9以上支持

实际开发的写法 既 没有兼容性问题又返回第一个元素

node.children[0]
node.children[node.children.length-1]

兄弟节点

  • node.nextSibling

得到的是下一个兄弟节点,包含元素节点和文本节点等等

  • node.previousSibling

返回上一个兄弟节点,找不到返回null

  • node.nextElementSibling 下一个元素节点
  • node.previousElementSibling 上一个元素节点

有兼容性问题,只能自己封装一个兼容性的函数

创建节点

  • document.createElement('tagment') 动态创建节点
  • node.appendChild(child) 添加一个节点到指定父节点的子节点列表末尾,类似数组中的push
  • node.insertBefore(child,指定元素) 将一个节点插入指定元素前面
  • 想要页面添加新元素 ;创建;添加

删除节点

parentNode.removeChild(子节点);

复制节点

node.cloneNode()

把node节点复制一份,如果括号参数为空或者false,默认是浅拷贝,只复制标签,不复制内容

三种方式动态创建元素区别

  • document.write()直接将内容写入页面的内容流,但是如果文档流已经执行完毕,则它会导致页面全部重绘
  • innerHTML如果采取拼接字符串的方式,需要大量拼接字符串,效率较低,如果采用数组格式拼接,效率高,结构稍微复杂
  • creatElement创建多个元素效率稍低一点点,但是结果更清晰

总结

创建

document.write

innerHTML

createElement

appendchild

insertBefore

removeChild

  1. 修改元素属性:src、href、title
  2. 修改普通元素内容:innerHTML、innerText
  3. 修改表单元素: value、type、disabled
  4. 修改元素样式:style、className

  1. DOM提供的API:getElementById、getElementByTagName
  2. H5提供的新方法 querySelector querySelectAll
  3. 利用节点操作:parentNode、children、previousElementSibling、nextElementSibling

属性操作

  1. setAttribute:
  2. getAttribute:
  3. removeAttribute:

事件操作

鼠标事件--

JS2-DOM的更多相关文章

  1. DOM window的事件和方法; Rails查询语法query(查询结构继承); turbolinks的局限;

    window.innerHeight 是浏览器窗口可用的高度. window.outerHeight 是浏览器窗口最大的高度. 打开chrome-inspector,上下移动inspector,看到s ...

  2. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

  3. 浅谈Vue.js2.0某些概念

    Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统.   A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...

  4. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  5. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  6. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  7. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  8. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  10. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

随机推荐

  1. GO中的GC

    go中的垃圾回收 前言 垃圾回收 go中的垃圾回收方式 三色标记法 根对象 STW 屏障技术 插入屏障 删除屏障 混合写屏障 GO中GC的流程 GC的触发时机 如果内存分配速度超过了标记清除的速度怎么 ...

  2. 应对数据爆炸时代,揭秘向量数据库如何成为AI开发者的新宠,各数据库差异对比

    应对数据爆炸时代,揭秘向量数据库如何成为AI开发者的新宠,各数据库差异对比 随着大模型的爆火,向量数据库也越发成为开发者关注的焦点.为了方便大家更好地了解向量数据库,我们特地推出了<Hello, ...

  3. 人工智能LLM模型:奖励模型的训练、PPO 强化学习的训练、RLHF

    人工智能LLM模型:奖励模型的训练.PPO 强化学习的训练.RLHF 1.奖励模型的训练 1.1大语言模型中奖励模型的概念 在大语言模型完成 SFT 监督微调后,下一阶段是构建一个奖励模型来对问答对作 ...

  4. Java并发编程面试题

    Synchronized 用过吗,其原理是什么? Synchronized是jvm实现的一种互斥同步访问方式,底层是基于对象的监视器monitor实现的. 被synchronize修饰的代码在反编译后 ...

  5. 天玑9300大战骁龙8 Gen3:十余项数据实测 到底谁才是安卓之王?

    一.前言:全大核天玑9300正面硬钢骁龙8 Gen3 究竟谁才是安卓芯片之王? 今年,两家移动芯片厂商都开始放大招了,骁龙首发Cortex-X4超大核,联发科也不甘示弱,初次将"全大核&qu ...

  6. Typecho文章采集发布插件-免费下载

    分享一款可以自动采集网页文章,并发布到typecho博客网站的typecho采集发布插件,支持简数采集器,火车头数据采集器,八爪鱼文章采集器,后羿采集器等. Typecho采集发布插件使用方法如下: ...

  7. MyISAM存储引擎的表级锁

    MyISAM存储引擎的表级锁 如果了解过文件锁的用法,那理解数据库锁就简单了.锁其实就协调多个进程或线程并发时,处理访问同一个资源的机制.在项目开发中,表锁是MySQL中作用范围较大的一种锁,它锁定的 ...

  8. ”动态“修改MAC地址

    一:获取MAC地址 1.自定义的MAC地址 这里是例程中存放自定义MAC地址的位置,如果想修改MAC地址可以在此处修改.一般例程这里是灰色的需要在工程预编译处配置. 可以看到MCU.c文件中此处代码生 ...

  9. Flink-启动后无法访问WebUI界面(Flink1.16)

    问题描述 通过./bin/start-cluster.sh启动Flink程序,正常启动后无法通过浏览器访问web UI界面,http://192.168.80.133:8081. 问题原因 Flink ...

  10. Linux-编译源码时所需提前安装的常用依赖包列表

    编译源码时所需提前安装的常用依赖包列表: yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel f ...