js进阶笔记

js进阶笔记

API application programming interface 应用程序编程接口
webAPI：浏览器里面有的API，就是 DOM + BOM

DOM

document 整个页面，把整个页面看成一个对象，使用对象把页面里面所有东西管理起来
例子：

<button id="btn"> 点击 </button>
<script>
	var btn = document.getElementById('btn')
	btn.onclick = function(){
		alert('点击按钮，弹出提示')
	}
</script>

在DOM中通常做这样三件事

• 1.获取元素 - document.getElementById
• 2.注册事件 - 元素对象.onclick = function(){}
• 3.实现效果 - alert()

获取元素

根据id获取元素

document.getElementById('ID')

返回值是一个元素对象 或者是一个 null (html 中没有找见id时)

什么是事件？

用户操作了，就发生了事件，用户的交互（不全面）
只要是用户的交互都使用事件解决
怎么用？
注册事件
事件源.on事件类型 = 事件处理程序
元素对象.on交互 = function() {}
如何修改元素的样式
元素.style 可以获取所有的行内样式
元素.style.css属性名 = 新的值
例子：

box.style.backgroundColor = "red"

js 对html 属性进行操作

3种属性 html 属性 css 属性 js属性
根据标签名获取元素

document.getElementsByTagName(tagName)

参数： tagName 标签名
返回值： 一个nodeList对象，一个元素的集合
注意：返回值是一个集合，不管页面上有多少个同名的标签都会返回一个集合，如果是一个集合，一定要通过索引先拿出来在操作
在事件处理程序中，this的执行为事件源
通过操作class 对样式进行控制
元素.className = 新类名
style 和 className 的区别

• style一次修改一个css样式，class可以一次修改多个属性
• style的优先级高于class
  className 的缺点：要么会把以前的样式全部覆盖掉，要么需要自己看看原来的样式，然后补充之前的样式，使用起来有些麻烦
  元素.classList 元素类型的集合
  .add(类名) // 添加类名
  .remove(类名) // 删除类名
  .toggle(类名） // 切换类名
  例子：

box.classList.add('green')

操作属性：
修改 元素.属性名 = 新的值
属性分类：

• 标准属性
  w3c 标准里面规定好的，具有特殊功能的属性 id，class，title，src，href
• 自定义属性
  标准里面没有的，根据需求自定义的
  getElementByTagName 的第二种使用方式
  作用：找到这个 前辈元素的所有后代里 元素里面 标签名是 tagName的元素
  例子：

var ul = document.getElementById('list')
var title = ul.getElementByTagName('img')

根据类名获取元素

document.getElementsByClassName(classname)
element.getElementsByClassName(classname)
参数：classname 类名
作用：根据类名获取元素
返回值：一个包含所有符合条件的元素集合（类数组）

js中操作 所有属性的方法

元素.getAttribute(属性名)
元素.setAttribute(属性名，属性值)
元素.removeAttribute(属性名）
例子：

<div id="box" abc="box1" data-index="1"></div>
<script>
	var box = document.getElementById('box')
	var abc = box.getAtrribute('abc')
	console.log(abc) // box1
	box.setAttribute('data-index',999) // 设置属性
</script>

h5里面推荐的自定义属性操作方式

需要先使用data-属性名 = 值
获取值： 元素.dataset.属性名
设置值：元素.dataset.属性名 = 值
例子：

<img src="xxx.jpg" id ="myImg">
var myImg = document.getElementById('myImg')
myImg.dataset.mysrc = 'xxx.png'
// <img src="xxx.jpg" id ="myImg" mysrc="xxx.png">
// 获取值
console.log(myImg.dataset.mysrc) // xxx.png

标准属性里面有一类属性比较特殊

checked 是否选中 单选框、多选框
seleted 是否选中 下拉框
disabled 是否禁用