商品介绍模块内容
规格与保证内容
售后保障内容
商品评价内容
手机社区内容
js 学习进阶（Dom部分 pink老师教学笔记）
目录
Web APLS和JS基础关联性
API和Web API
DOM
一.DOM简介
二.获取元素
通过ID获取
通过标签名获取
通过HTML5新增的方法获取
特殊元素获取
三.事件基础
四.操作元素
1.修改元素内容
2.修改元素的属性
案例：分时问候案例
3.修改表单属性
案例分析：仿京东显示密码案例
4.样式属性操作
案例：二维码案例
案例：循环精灵图
案例：显示隐藏文本框内容
操作总结
5.排他思想（算法）
案例：百度换肤效果
案例：表格隔行变色效果
案例：表单全取消全选
6.获取自定义属性值
案例：tab栏切换
7.H5自定义属性
五.节点操作
节点层级：父子兄层级关系
案例：新浪下拉菜单
节点兄弟节点
创建和添加节点
案例：简单版发布留言案例
删除节点
案例：删除留言
复制节点
案例：动态生成表格
三种动态创建元素区别
六.DOM重点核心
1.创建
2.增
3.删
4.改
5.查
6.属性操作
7.事件操作
js进阶下篇：
Web APLS和JS基础关联性
API和Web API
DOM
一.DOM简介
- DOM是处理HTML或者XML的标准接口
- 在前面的js中，标签是现在head里的，但是这里的DOM，得先有标签，所以写在里
二.获取元素
通过ID获取
document.getElementById()
document.getElementById(‘time’)
返回的是一个元素对象
通过标签名获取
document.getElementsByTagName()
- 返回的是 获取过来元素对象的集合 以伪数组的形式存储;
- 即使只有一个li，返回的还是伪数组的形式；
- 如果一个li也没有，返回的是空的伪数组；
- 我们想要一次打印里面的元素对象，我们可以采取遍历的方式
for(var i=0;i如果想要ol里面的li呢？
方法一：
element.getElementsByTagName('标签名');
var ol=document.getElementsByName('ol'));//[ol]
console.log(ol[0].getElementsByTagName('li'));
注意：伪数组形式不能作为父元素，父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
方法二：
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName());
可以先对父元素，指定一个ID，然后var ol = document.getElementById('ol');
然后再用ol.getElementsByTagName('li');
通过HTML5新增的方法获取
document.getElementsByClassName(‘类名’)；
根据类名返回元素对象集合
var boxs=document.getElementsByClassName('box')；
document.querySelector(‘选择器’)；
根据指定选择器返回第一个元素对象，不用再区分ID,类,…了
里面的选择器需要加符号.#等等
var firstBox = document.querySelector('.box');类选择器
var firstBox = document.querySelector('#nav');ID选择器
var firstLi = document.querySelector('li');标签选择器
document.querySelectorAll(‘选择器’)；
根据指定选择器返回所有的元素
var allBox=document.querySelectorAll('.box')；
特殊元素获取
1.获取body元素
document.body
var bodyEle=document.body2.获取Html元素
document.documentElement
var htmlEle=document.documentElement;三.事件基础
事件概述：
js使我们有能力创建动态页面，而事件是js侦测到的行为
简单理解：触发-响应机制
事件三要素：
var btn = document.getElementById('btn');事件源
btn.onclick = function(){
alert('点秋香')；
}
- 事件源 ：事件被触发的对象 谁 按钮
- 事件类型 如何触发，什么事件，比如鼠标点击，还是鼠标经过
- 事件处理程序：通过一个函数赋值的方式完成
执行事件的步骤：
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采用函数赋值的形式）
四.操作元素
JS的DOM操作可以改变网页内容，结构和样式，我们可以利用Dom操作元素来改变里面的内容和属性，注意以下都是属性。
1.修改元素内容
element.innerText——非标准 (从起始位置到终止位置的内容，但它去除html标签（不识别html标签，里面的标签会直接显示）和空格和换行)
element.innerHTML——W3C推荐 (从起始位置到终止位置的内容，但它包括html标签，同时保留空格和换行)
2.修改元素的属性
//1.获取元素
var pig = document.getElementById('pig');
var dog = document.getElementById('dog');
var img = document.querySelector('img');
//2.注册事件
dog.onclick = function () {
img.src = "../images/dog.jpg";
}
pig.onclick = function () {
img.src = "../images/pig.jpg";
}案例：分时问候案例
早上好
3.修改表单属性
利用DOM可以操作如下表单元素的属性：
type, value, checked, selected, disabled
- 表单里面的值通过修改value值来修改的
-
案例分析：仿京东显示密码案例
- 核心思路：点击眼睛按钮，把密码框改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
- 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1.
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
eye.src = '../images/dog.jpg';
flag = 1;
} else {
pwd.type = 'password';
eye.src = '../images/tudou.jpg';
flag = 0;
}
}注意：算法的应用，还有点击之后的赋值操作
4.样式属性操作
- element.style— 行内样式操作
- element.className— 类名样式操作
var div = document.getElementById('xhz');
div.onclick = function () {
div.style.backgroundColor = 'purple';
// this.style.width='250px';
}1.Js里面的样式采取驼峰命名法，比如fontSize，backgroundColor
2.JS修改style样式操作，产生的是行内样式，css权重比较高
3.this指向的是事件函数的调用者
案例：二维码案例
X
注意两种获取元素的区别，有的是需要加[0]的
案例：循环精灵图
1.首先精灵图图片排列是有规律的
2.核心思路：利用 for循环 修改精灵图的背景位置 background-position
3.让循环里面索引号i*44就是每个图片的y坐标
案例：显示隐藏文本框内容
使用className修改元素样式
.change{
width:30px;
height:30px;
background-color:black;
}
//让当前元素的类名改为了change
//className 会直接更改元素的类名，会覆盖原先的类名
this.className = 'change';
this.className = 'previous change';//这样就是将原先的类和现在的类进行合并啦
操作总结
5.排他思想（算法）
如果有一组样式，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有的元素全部清除样式（干掉其他人）
2.给当前元素设置样式（留下我自己）
3.注意顺序不能颠倒，先干掉其他人，再留下我自己
案例：百度换肤效果
案例：表格隔行变色效果
1.用到新的鼠标事件，鼠标经过和鼠标离开
2.核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3.注意：第一行（thead）不需要变换颜色，因此我们获取的是tbody里面的行
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
===================================================================================
案例：表单全取消全选
商品
价钱
iPhone6
1000
2
100
6.获取自定义属性值
var div = document.querySelector('div')
1.获取元素的属性值
//(1) element.属性-内置的属性
console.log(div.id)
//(2) element.getAttribute('属性')-自定义属性
index就是程序员自定义的属性
console.log(div.getAttribute('id'));
2.设置属性值
element.属性 = '值' //设置内置属性值
element.setAttribute('属性','值'); //主要针对于自定义属性
3. 移除属性
element.removeAttribute('属性');
案例：tab栏切换
1.Tab栏切换有两个大的模块
2.上面的选项卡模块，点击某一个当前这一个底色是红色，其余不变（排他思想），修改类名的方式
3.下面的模块内容，会随着上面的选项卡变化，所以下面模块的变化写到点击事件里面。
4.内容显示模块：下面的选项卡和上面的选项卡是一一对应，相匹配
5.核心思路：给上面的nav里面的小li添加自定义属性，属性值从0开始编号
6.当我们点击nav里面的list的某一个小li，让content里面对应序号的内容显示，其余隐藏（排他思想）
7.H5自定义属性
自定义属性目的:是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
H5规定自定义属性data-开头作为属性名并且赋值
H5新增的获取自定义属性的方法：div.dataset.index div.datase['index']
dataset是一个集合，里面存放了所以以data开头的自定义属性
如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
五.节点操作
节点至少有三个基本属性
- nodeType 节点类型
1.1 元素节点，nodeType为1
1.2 属性节点，nodeType为2
1.3 文本节点，nodeType为3（文本节点包含文字、空格、换行等） - nodeName节点名称
- nodeValue节点值
节点层级：父子兄层级关系
//离元素最近的父级节点，如果找不到，返回null
父节点： parentNode
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// var parent = as[i].parentNode 这样写会报错，要用this
var parent = this.parentNode
lis.removeChild(parent)
}
}
//返回指定节点的子节点的集合（包含元素，属性，文本节点（换行等））
子节点：parentNode.childNodes
console.log(ul.childNodes);
//返回所有的子元素节点，只返回子元素节点，其他节点不返回（重点）非标准
parentNode.children
//第一个子节点和最后一个子节点，不管是文本节点还是元素节点
parentNode.firstChild
parentNode.lastChild
//只返回元素节点，IE9以上才支持
parentNode.firstElementChild
parentNode.lastElementChild
//实际开发中的写法，既没有兼容性问题，又可以返回元素
parentNode.children[0]
parentNode.children[parentNode.children.length-1]
案例：新浪下拉菜单
1.导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
2.核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
节点兄弟节点
nextSibling 返回当前元素的下一个兄弟元素节点，包含元素节点、文本节点，找不到则返回null。
previousSibling 返回当前元素上一个兄弟元素节点，包含元素节点、文本节点，找不到则返回null
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。兼容性,IE 9+
previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。兼容性,IE 9+
如何解决兼容性问题 ？
自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while(el = el.nextSibling) {
if(el.nodeType === 1){
return el;
}
}
return null;
}
创建和添加节点
先创建再添加
document.createElement('tagName') 方法创建由 tagName 指定的HTML 元素
因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
1. 创建节点
document.createElement('tagName')
因为这些元素原先不存在，是根据需求动态产生的，所有也称为动态创建元素节点
2. 添加节点
2.1 node.appendChild(child)——node父级，child子级
node.appendChild(tr)方法将一个节点添加到指定父节点的子节点列表末尾——类似push
2.2 node.insertBefore(child,指定元素)
3. 页面添加一个新的元素，1.创建元素，2.添加元素
案例：简单版发布留言案例
1.核心思路：点击按钮后，就动态创建一个li，添加到ul里面去
2.创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
3.如果想要新的留言后面显示就用appendChild如果想要前面显示就用
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
ul.appendChild(li);
//ul.insertBefore(li,ul.children[0]);
}
}删除节点
node.removeChild(child)____删除子节点，并返回删除的节点
复制节点
node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点- 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
- 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点
案例：动态生成表格
- 因为里面的学生数据都是动态的，我们需要JS动态生成，这里我们模拟数据，自己定义好数据，数据我们采用对象形式储存。
- 所有的数据都是放到tbody里面的行里面
- 因为行很多，我们需要循环创建多个行（对应多少人）
- 每个行里面又有很多的单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存放里面（双重for循环）
- 最后一列单元格是删除，需要单独创建单元格
姓名 科目 成绩 操作
三种动态创建元素区别
1.document.write()
document.write('123')
直接将内容写入页面的内容流，但是文档流执行完毕，所以会导致页面全部重绘,也就是说，如果页面文档流加载完毕，
再调用这句话会**导致页面重绘**，原来的就没有啦
2.element.innerHTML
element.innerHTML = '我也可以创建标签，啦啦啦'
特点：
（1）innerHTML 是将内容写入某个DOM节点，**不会导致页面重绘**
（2）innerHTML 创建多个元素效率更高（但是不要采取拼接字符串的形式，要采用数组拼接才效率高）
3.document.createElement()
特点：大量创建时，效率低一点点，但是结构更清晰
六.DOM重点核心
关于dom操作，我们主要针对元素的操作，主要有创建，增，删，改，查，属性操作，事件操作
1.创建
1.document.write
2.innerHTML
3.creatElement
2.增
1.appendChild
2.insertBefore
3.删
1.removeChild
4.改
5.查
6.属性操作
7.事件操作
