《DOM Scripting》 – 阅读笔记

找到结点

  1. element = document.getElementById(ID);
    基于id获得成分结点,借使不设有则赶回null

  2. element = document.getElementByTagName();
    依照标签得到结点的数组。

  3. booleanValue = element.hasChildNodes;
    看清是或不是有子结点。
    文件结点和总体性结点没有子结点,所以采纳该方式重回false。

  4. object.getAttribute(attribute);
    收获属性结点。
    若没有该结点,则赶回null

DOM Scripting – Web Design with JavaScript and the Document Object
Model,Jeremy Keith
中文名:JavaScript DOM 编制程序艺术

动画

  1. variable = setTimeout(“function”,interval)
    一段时间后实施函数

  2. clearTimeout(variable)
    注销延迟运维

  3. variable = setInterval(“function”,interval);
    每隔一段时间执行函数

  4. clearInterval(variable)
    撤除重复执行

  5. parseInt
    把字符串转换为整数

  6. parseFloat
    把字符串转换为浮点数

渐进增强的Ajax

Ajax的打响表惠氏件事:二个简洁的名字有助于掌握一个想方设法。Ajax比“具有DOM脚本,CSS和HTML的XMLHttpRequest”更便于通晓,那么本人用Hijax来代替“渐进增强的Ajax”也是简化精通。

Ajax的能力正视服务器,服务端编制程序语言做了绝大部分实际工作。XMLHttpRequest就像是三个在浏览器和服务器之间的网关(gateway),传输请求和响应。如果网关被移除了,还可以够发送请求和承受响应,但时间更长。

DOM,文档对象模型,D表示文书档案,web页面;D表示对象,document对象;M表示模型,浏览器提供的一种web页面包车型大巴照耀(模型),你可用JavaScript来读写该映射。(生硬的翻译。。。)

操作结点

  1. var para = document.createElement(“p”);
    创制成分结点

  2. var txt = createTextNode(“Hello World”);
    开创文本结点

  3. para.appendChild(txt);
    txt结点作为子结点插入到para中

  4. reference = element.insertBefore(newNode,targetNode);
    计划成分到已存在成分的眼下
    一经不钦点targetNode,则插入到element的子结点的最后。

  5. paraElement.insertAfter(newElement,targetElement);
    布署成分到已存在元素的前边
    以此办法是祥和小编写的

    1 function insertAfter(newElement,targetElement) {
    2 var parent = targetElement.parentNode;
    3 if (parent.lastChild == targetElement) {
    4 parent.appendChild(newElement);
    5 } else {
    6 parent.insertBefore(newElement,targetElement.nextSibling);
    7 }
    8 }

  6. reference = node.cloneNode(true)
    复制结点,并复制子结点
    reference = node.cloneNode(false)
    复制结点,但不再制子结点

  7. reference = element.removeChild(node)
    移除结点并重返该节点,该结点的子结点也被剔除。

  8. reference = element.replaceChild(newChild,oldChild)
    替换element的子结点oldChild.
    一旦新结点有子结点,也被插入到文书档案中

innerHTML比document.write更好。使用innerHTML能维系JS和符号的分开,不必插入<script>标记

结点类型包括元素结点,文本结点,属性结点。

JavaScript中有三种对象:用户定义的靶子,JavaScript中置放的靶子和浏览器提供的对象(Host
Object)。
浏览器提供的最主旨的是window对象,该对象就意味着2个浏览器窗口。window对象的法门和品质日常通过浏览器对象模型(BOM)来引用。
document对象表示html文书档案,而本书的主旨便是座谈document对象的属性及艺术。

三个文书档案正是局部结点的集聚,那个结点组成树状结构,称为文档树。贰个文书档案正是三个结点树。

结点属性

  1. name = node.nodeName;
    获得结点的名字

  2. integer = node.noteType;
    获取结点的门类

    1. ELEMENT_NODE
    2. ATTRIBUTE_NODE
    3. TEXT_NODE
    4. CDATA_SECTION_NODE
    5. ENTITY_REFERENCE_NODE
    6. ENTITY_NODE
    7. PROCESSING_INSTRUCTION_NODE
    8. COMMENT_NODE
    9. DOCUMENT_NODE
    10. DOCUMENT_TYPE_NODE
    11. DOCUMENT_FRAGMENT_NODE
    12. NOTATION_NOD
  3. value = node.nodeValue;
    收获结点值。
    若为属性结点,重回属性值,若为文本结点,则赶回文本内容,若为成分结点,则赶回null。
    以身作则:得到段落内的文本<p>那是一段文本</p>
    description.childNodes[0].nodeValue
    浅析:首先取得p的子结点—文本结点,然后拿走文本结点的值——文本。因为段落内的文件是3个例外的结点,那些文件是段子的首先身材结点

  4. object.setAttribute(attribute,value)
    安装结点属性及其值

  1. document.write
    document对象的write方法提供了二个总结快捷的法子来插入1个字符串到文书档案。

  2. innerHTML
    浏览器引入的innerHTML属性,用于读写成分内的HTML。
    动用innerHTML,成分内的HTML将全方位被沟通。

遍历结点树的格局

  1. nodeList = node.childNodes
    获得子结点的列表

  2. node.childNotes.length
    获取子结点的多寡

  3. reference = node.firstChild
    取得第1身长结点

  4. reference = node.lastChild
    获得最后一个子结点

  5. reference = node.nextSibling
    获取下一个结点

  6. reference = node.previousSibling
    收获上二个结点

  7. reference = node.parentNode
    拿到父结点

Ajax

XMLHttpRequest对象
IE成立语法
var waystation = new ActiveXObject(“Microsoft.XMLHTTP”);

其他浏览器语法:
var waystation = new XMLHttpRequest();

为了同时知足上述三种完毕,写3个函数来缓解:

 1 function getHTTPObject(){
 2     if(window.ActiveXObject){
 3         var waystation = new ActiveXObject("Microsoft.XMLHTTP");
 4     } else if(window.XMLHttpRequest){
 5         var waystation = new XMLHttpRequest();
 6     } else {
 7         var waystation = false;
 8     }
 9     return waystation;
10 }

XMLHttpRequest对象有为数不少艺术,个中最可行的是open。
open方法用来针对服务器上文件对象,也可钦赐HTTP请求:GET,POST,SEND,第三个参数钦点是否请求是叁只的。
开始化GET请求:请求叁个example.txt文件
request.open(“GET”,”example.txt”,true);

当服务器重临响应,触发onreadystatechange事件处理器,将会调用执行doSomthing。

1 request.onreadystatechange = doSomthing
2 request = getHTTPObject();
3 request.open("GET","example.txt",true);
4 request.onreadystatechange = doSomething;
5 request.send(null);

亟待写3个doSomething函数来拍卖响应。
当服务器再次来到响应到XMLHttpRequest对象,大量性质就足以应用了。
readyState属性是3个实时更新的数字值当服务器处理请求时:
0 uninitialzed
1 loading
2 loaded
3 interactive
Ajax,4 complete
当readyState属性值为4,则可以访问服务器重返的数据了。
经过responseText属性来以字符串文本的情势拜访数据。借使回到数据Content-Type头为”text/html”,则也能够用responseXML属性来访问。

1 function doSomething(){
2     if(request.readyState == 4){
3     alert(request.responseText);
4     }
5 }

操作CSS

各类成分都以二个目标,各样对象都有局地品质。
里头一些属性表示结点在结点树中的地方新闻,比如:parentNode,childNotes等等。
再有一对属性,包括成分本身的新闻,比如:nodeType和nodeName
还有一部分属性,叫做样式属性,包涵了该因素的样式。查询样式属性重返三个对象,JavaScript通过读写该指标足以决定成分的体裁。
element.style.preperty
JavaScript会把”-“当作减号,所以利用驼峰命名法来引用样式属性,上边是有的示范

CSS 

JavaScript 

color color
font-family fontFamily
background-color backgroundColor
font-weight fontWeight
margin-top-width marginTopWidth

也得以运用类名属性来决定成分的体制

  1. element.className

假使原先已有类名,能够这么写来添加类

  1. element.className += “intro”

用了一周的光阴看完了那本书,其实内容依旧相当的粗略的,顺便用来学习匈牙利(Hungary)语,积累了部分单词。
读完一本书不易于,总要做些记录,才够本儿。

相关文章