javascript基础笔记(三)

  1、循环结构

      1、什么是循环

         反复执行一段代码

      2、特点

         1、循环条件
2、循环操作

      3、while()

         1、语法
   while(条件){
     
   }
2、结束循环结构
   break

      4、for()

         1、语法
   for(循环变量声明;条件;更新循环变量){
     循环体
   }
2、特殊用法
   1、省略 表达式1
   2、省略 表达式2
   3、省略 表达式3
   4、省略所有表达式
   5、表达式1和3允许接受多个表达式
3、for 和 while
   for:确定循环次数使用
   while:不确定循环次数使用

   2、数组

      1、什么是数组

         一组数据保存在一个变量中
下标：索引,index,表示每个元素的位置，从0开始，到长度-1

      2、声明数组

         var 数组名=[];
var 数组名=[值1,值2,...];

var 数组名=new Array();
var 数组名=new Array(值1,值2...);

      3、访问数组

         1、存
   数组名称[下标]=值;
2、取
   数组名称[下标]
3、属性
   length
   作用：数组长度，元素个数

   3、在 整数数组中 找到最大值

      在数组中查找指定元素的位置

        找到 ：打印索引
没找到：给出提示

************************************

1、DOM概述

   1、DHTML介绍 

      D : Dynamic 动态的

      功能：当网页加载到客户端之后依然有能力改变它上面的内容

      DHTML=HTML+CSS+Javascript

      包含：

         1、动态改变页面元素
2、与用户进行交互
3、DHTML对象模型中主要包含
   BOM：浏览器对象模型
   DOM：文档对象模型

   2、DHTML-BOM与DOM

      1、BOM

         作用：专门用来访问和操作浏览器窗口。
BOM 没有标准和规范，单支持性较好。

      2、DOM

         作用：专门用来访问和操作网页文档内容

   3、DOM概述

      标准被分为3个部分:

      1、核心 DOM

         针对任意一个结构化文档所提出的标准模型(属性和方法)
结构化文档：
  1、html ：用于显示数据
  2、xml  : 用于记录数据

      2、XML DOM

         针对XML文档所提供的属性和方法

      3、HTML DOM

         针对HTML文档所提供的属性和方法

      1、DOM发展

         1、DOM1：定义了DOM的最底层的内容
2、DOM2：增加 交互模块 
   DOM2 Core：DOM1底层基础上增加了新内容
   DOM2 Style:增加了操作HTML样式的属性和方法
   DOM2 Tranversal And Range：增加了遍历页面元素的属性和方法
   DOM2 Event 标准化事件
3、DOM3
   增加新方法和属性

   4、DOM树

      又称为 节点树

      将HTML页面 解析称为一个 倒挂的树状结构

      文档中的元素，属性，文本，注释都是树状结构中的一个节点

      整个文档 是一个 文档节点(document)

      每个HTML元素 是一个 元素节点(Element Node)

      包含在HTMl元素中的文本 是一个 文本节点(Text Node)

      包含在HTML元素中的属性 是一个 属性节点(Attribute Node)

      页面中的注释属于 注释节点(Comment Node)

   5、document 对象

      该对象由JS解释器负责创建，不需要声明，直接就能使用

2、通过 HTML 选取元素

   1、document.getElementById()

      返回值：指定ID的元素对象

   2、node.getElementsByTagName()

      node : 元素节点对象

      作用：根据"标签名"称获取一组对象

      返回值：动态数组

   3、node.getElementsByClassName()

      node : 元素节点对象

      作用 ：根据 class 属性值 获取一组对象

      返回值：动态数组

   4、通过节点关系获取页面元素

      1、节点关系

         1、父节点(Parent Node)
2、子节点(Child Node)
3、兄弟节点(Sibling)

      2、属性

         1、
  1、parentNode
     获取当前元素的父节点对象

           2、childNodes
     获取当前元素的所有子节点对象
     返回：数组
  3、children
     获取当前元素的所有子元素节点对象
  4、firstChild
     获取当前元素的第一个子节点对象
  5、lastChild
     ...
  6、previousSibling
     作用：获取上一个兄弟节点
  7、nextSibling
     作用：获取下一个兄弟节点

         2、获取 元素节点对象
   1、firstElementChild
      第一个元素子节点
   2、lastElementChild
      最后一个元素子节点
   3、previousElementSibling
      获取上一个 兄弟 元素节点
   4、nextElementSibling
      获取下一个 兄弟 元素节点

3、读取和修改 节点内容

   1、元素的内容

      1、HTML内容

         属性：innerHTML
作用：获取 或 设置元素节点中的HTML内容

      2、文本内容

         属性：
  innerText(火狐不支持)
  textContent
作用：获取 或 设置元素节点中的 文本内容

   2、元素的属性

      1、属性集合

         元素节点属性:attributes
返回一个属性集合,类型为 NamedNodeMap 是一个 类数组对象

      2、获取 属性值

         1、elem.attributes[下标].value
2、elem.attributes["属性名"].value;
3、element.getAttributeNode("属性名").value;
4、element.getAttribute("属性名");

      3、修改 属性值

         1、元素对象.属性名=value;
2、element.setAttribute(name,value);(IE8不支持该方法)
3、element.setAttributeNode(attrNode);
//前提 ：先创建 属性节点对象

   3、元素的样式

      1、CSS样式三种使用方式

         1、内联
   <div style="">
2、内部样式表
   <style></style>
3、外部样式表
   <link>

      2、常用访问样式的方式

         常用：访问元素的 内联样式
属性：style 属性
  style.样式属性名称
  样式属性名称组成：
  CSS:background-color
  JS :backgroundColor
  CSS:border-left-color
  JS :borderLeftColor

      3、获取 计算的(Computed)样式

         变相获取 内部和外部样式表中的值
DOM：
  document.defaultView.getComputedStyle(元素对象).属性名 ;
IE：
  元素对象.currentStyle.属性名

注意：该方法只能获取样式属性值，不能设置。设置样式全部采用style属性进行设置

      4、修改 样式表中的样式值

         1、先获取样式表对象
2、获取 样式表对象中所有样式的集合
3、在集合中，找到要修改的样式规则
4、获取或设置指定的样式值