Javascript客户端编程

# Javascript客户端编程

# 了解document属性，了解DOM

window全局对象下有document属性，表示我们当前的页面，该属性是一个对象
window.document.body 显示所有的页面内容 window.document.head 显示我们html文件中的head标签的内容

html的文档内容在浏览器中是以node（节点）的方式呈现的，各个页面节点是一个树形图
利用浏览器给我们提供的DOM API，可以去访问页面各节点(html标签)，可以动态的添加和删除节点，设置节点内容的css属性

# 认识元素选择DOM API

getElementById

getElementsByName

getElementsByTagName

querySelector

querySelectorAll

getElementsByClassName

# 节点的常用操作

要插入新内容到指定的位置，我们必须先建立相关的节点，如果节点是元素，则用createElement API ，如果节点中还有文本节点，则要使用createTextNode API来插入文本节点，文本作为一个节点，如果是某一个元素的一部分，则我们要利用appendChild API来插入内容到父节点

createElement （document）

createTextNode （document）

appendChild （父节点上调用）

removeChild

insertBefore

# 了解的节点的属性

nodeName
nodeType
nodeValue

# DOM节点的文档结构以及遍历

parentNode （访问父节点）
firstChild （找第一个子节点）
lastChild （找最后一个子节点）
childNodes (找出所有的子节点)
nextSibling （访问兄弟节点）
previoursSibling (访问上一个兄弟节点)

# DOM元素树的结构以及遍历

parentElement (访问父元素)
firstElementChild （访问第一个子元素）
lastElementChild （访问最后一个子元素）
children (获取所有的子元素)
childElementCount （得到子元素的个数）
nextElementSibling (访问下一个兄弟子元素)
previoursElementSibling (访问上一个兄弟子元素)

# 访问元素的属性

标准属性包括id、src、className (node.id) 非标准属性width、height(getAttribute、setAttribute) 自定义属性（data-tips） dataset属性 (node.dataset)

# 修改元素内容

找到元素，利用DOM API去修改内容

innerHTML （修改元素内部的内容）

outerHTML （替换元素内容，包括标签）

innerText (修改元素的文字内容)

insertAdjacentHTML（位置， html字符串）在指定的位置插入节点位置包括(beforebegin、afterbegin、beforeend、afterend)

textContent （修改元素内部的文字）

# 文档和元素位置以及滚动

# 视口宽度和高度（浏览器用于显示页面的宽度和高度）

document.documentElement.clientWitdth
document.documentElement.clientHeight

# 网页的宽度和高度

获取元素的几何尺寸

   document.documentElement.getBoundingClientRect()  ( top left  right bottom x y width height)
   x === left
   y === top
   x + width === right
   y + height === bottom

1
2
3
4
5

对于元素来说，通过getBoundingClientRect()获取的位置信息，都是相对于视口来显示

# 滚动的宽度和高度，代表我们页面滚动了多少像素

     document.documentElement.scrollLeft(向右滚动)
     document.documentElement.scrollTop（垂直滚动，向下滚动）

1
2

window.scrollTo(x,y) => 滚动到距离网页页面定点多少高度的位置 x=> 水平距离 y=>垂直距离

获取军事板块在网页的位置

var el = document.querySelector('#historyNewsList').getBoundingClientRect()
var scrollHeight = document.documentElement.scrollTop
var elHeight = el.top + scrollHeight

1
2
3

利用window.scrollTo(0,elHeight)

屏幕的宽度和高度  
屏幕的宽高 screen.width  screen.height
屏幕的可用宽和高  screen.availWith screen.availHeight(除去window开始任务栏)

元素的宽高，开始位置,内容从文档的开始位置算起，针对文档
e.offsetTop
e.offsetLeft
e.offsetWith
e.offsetHeight

# 利用脚本来操作CSS

操作元素的属性中的style

css里面font-size这个属性，利用js操作时，我们要去掉-，使用小驼峰的方式来书写: e.style.fontSize = "30px"
用计算样式获取指定元素的属性:window.getComputedStyle(元素, null)
js操作css类: e.className 获取当前使用的css中的class e.classList 获取当前的css类，并可以利用相关的方法进行操作

   e.classList.add   => 添加
   e.classList.remove  =>  删除
   e.classList.contains  => 检测是否包含
   e.classList.toggle  => 切换

1
2
3
4

脚本连接和操作样式表 1 获取head元素 2 建立link元素并设置相关属性 3 插入link元素到head

# 客户端事件系统

客户端javascript程序采用了异步事件驱动编程模型，事件是web浏览器通知应用程序发生什么事情。

# 事件对象

与特定的事件相关兵器含有该事件详细信息的对象。

# 事件的应用

了解web浏览器给我们提供的事件

与输入设备有关的事件（鼠标事件、键盘事件）
用户界面的一些事件（表单元素的各种事件获取焦点改变内容）
状态变化的事件(window中的load、scroll、resize)
特定的API事件（html5里面提供的拖动事件等）

传统的类型类型

表单事件（submit、reset、change）
window事件（load、scroll、error、resize）
鼠标事件（click、dbclik、mousemove、mouseenter、mouseleave）
键盘事件（keydown、keyup、keypress）

DOM事件的分级

DOM0、DOM2、DOM3

如何使用事件

必须注册事件处理器，当事件发生的时候，就处理我们指定的代码有两种方式来注册使用事件，分别用DOM0和DOM2的方式 DOM0的事件注册可以分两种方式，

← 深入理解JavaScript JavaScript中面向对象的编程→