前端开发学习笔记（一）

忘是亡心i 2022-07-30 13:29 157阅读 0赞

单选框始终选中一个：设置为相同的`name`值。  
默认选中：`checked`

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

`unescape()`函数可对通过 `escape()` 编码的字符串进行解码。

/*对IE9加载html5的新特性*/

（类似modernizer.js的效果）

### 文档对象模型DOM（Document Object Model） ###

定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

> 元素节点：html、body、p等都是元素节点，即标签。
> 
> 属性节点：元素属性，如 a标签的链接属性href。
> 
> 文本节点：向用户展示的内容，如**li**中的JavaScript、DOM、CSS等文本。

### 节点属性 ###

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

1.  nodeName : 节点的名称
2.  nodeValue ：节点的值
3.  nodeType ：节点的类型

#### 一、nodeName 属性: 节点的名称，是只读的。 ####

1.  元素节点的 nodeName 与标签名相同
2.  属性节点的 nodeName 是属性的名称
3.  文本节点的 nodeName 永远是 \#text
4.  文档节点的 nodeName 永远是 \#document

#### 二、nodeValue 属性：节点的值 ####

1.  元素节点的 nodeValue 是 undefined 或 null
2.  文本节点的 nodeValue 是文本自身
3.  属性节点的 nodeValue 是属性的值

#### 三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型: ####

`insertBefore()`方法可在已有的子节点前插入一个新的子节点。

`replaceChild` 实现子节点(对象)的替换。返回被替换对象的引用。

### 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法: ###

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

*  `window.innerHeight` \- 浏览器窗口的内部高度
 *  `window.innerWidth` \- 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

*  `document.documentElement.clientHeight`表示HTML文档所在窗口的当前高度。
 *  `document.documentElement.clientWidth`表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的body标签

*  `document.body.clientHeight`
 *  `document.body.clientWidth`

### 在不同浏览器都实用的 JavaScript 方案： ###

var w= document.documentElement.clientWidth
          || document.body.clientWidth;
    var h= document.documentElement.clientHeight
          || document.body.clientHeight;

`scrollLeft:`设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。  
`scrollTop`:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。  
`offsetLeft`:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。  
`offsetTop`:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置