《JavaScript DOM编程艺术》笔记

时间：2014-03-26 09:30:31 收藏：0 阅读：547

知识点：

注意代码分离：

- CSS表示层
- JS行为层
- HTML内容

标记良好的代码就是一切！

Html：

id实现页内导航： id=here <a href="#here"/>
XHTML ： <img /><br />为了向后兼容，反斜杠前有一个空格

JS：

js关联数组：vocalist[“piano”][name]=“Jhon”;
js内建对象：Array()\Date()\Math
宿主对象：Form\Image\Element
Var variable=setTimeout("functionName",1000ms);隔一段时间执行一次函数
clearTimeOut(variable);清除等待队列中的函数
parseInt("")的返回值永远是整数
element.property 可以为元素创建属性
Math.ceil(number);向大于方向舍入最接近的整数
Math.floor(number);~~小于~~
Math.round(7.53438);四舍五入：向最接近的整数舍入
当前页面的urlwindow.location.href;
String.indexOf(subString) ；
String.splitting(char)：以char将string分成数组，char属于前一个
window.onload = functionName;
/*页面加载完毕再执行，可重写使页面加载时执行若干函数(eg:
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
)*/

CSS：

选择器、默认继承，因此特殊性大的要后定义
z-index 属性设置元素的堆叠顺序,数值越大，越在前面，PS：仅能在定位元素上奏效
overflow:visible\hidden\scroll\auto;全看到、隐藏多出的部分、滚动条、又多出才有滚动条
margin: 1em 10%;缺少4做外边距从2右外边距复制，缺少3下外边距，从1上外边距复制；百分数是相对于父元素算的
display:inline-block;行内块
margin:auto;居中显示
list-style:none;去掉ul\li\id等元素的默认样式
text-decoration:none;a没有下划线
text-align:center;文字居中显示
imv的alt属性有利于图片被搜索到；title属性，鼠标悬停会显示
<html lang=“zh-CN”>
<meta charset="utf-8">
定义列表<dl><dt><dd>标题和描述
search robot对em、strong的内容会关注
引用：block quote 自动缩进; cite属性标志引用来源
<pre>保留换行、显示代码

DOM方法和属性：

0、
CSS-DOM:

元素节点:
1\与位置相关的属性：firstChild\lastChild\nextSibling\previousSibling\parentNode\ChildNodes
2\与本身有关属性：nodeType\nodeName
3\style 属性，返回对象:elementt.style.property,属性以驼峰命名方式，不能检索外部CSS文档的信息
4\element.className 可读可写；等价于element.setAttribute("class","className")

1、

- element.childNodes 含给定元素节点的子元素数组
- node.firstChild=node.childNodes[0]
- node.lastNode
- node.nodeValue 返回节点的值
- Reference=node.cloneNode(deep：true\false)；返回指向新节点的指针，true子节点一起复制，但属性节点会一起复制
- Parent=element.removeChild(node);
- Parent=element.replaceChild(new,old);
- insertAfter()自己写
- attributeValue = element.getAttribute(attributeName);返回属性值
- booleanValue=element.hasChildNodes;

2、

- node.nodeType 代表节点的数字，12种：元素节点1、属性节点2、文本节点3、

bubuko.com,布布扣

3、

1级DOM(DOM Core):	HTML-DOM	返回类型
document.getElementById(“idValue”)		return 元素节点对象
document/element.getElementByTagName(“tag name”)	documet.TagName（eg：document.body == document.getElementByTagName("body")[0]	return 整个文档/元素下所有的对象的数组
element/object.getAttribute(“Attribute”)	element.attributeName	return 属性值
object.setAttribute(“Attribute”,”Attribute Value”)	element.attributeNAme = Attribute Value	不会改变文档本身的源代码：动态刷新不影响文档静态内容