WEB前端开发工程师的随记–黑妞HAHA

——专注web前端开发，关注用户体验

Tag Archives: javascript

小结下dom节点操作

4条评论 Posted by 于 2月 14, 2011

一、节点的定义

dom节点树

dom节点树

图中可见节点HTML文档中的每个成分都是一个节点:

  • 整个文档是一个文档节点
  • 每个HTML标签是一个元素节点
  • 包含在HTML元素中的文本是文本节点
  • 每个HTML属性是一个属性节点
  • 注释属于注释节点

备注：通过DOM，可以访问HTML文档中的每个节点。

二、节点引用

节点的绝对引用：

  • document.documentElement返回文档的根节点
  • document.activeElement返回当前文档中被击活的标签节点
  • event.fromElement返回鼠标移出的源节点
  • event.toElement返回鼠标移入的源节点
  • event.srcElement返回激活事件的源节点

节点的相对引用：(设当前对节点为node)

  • node.parentNode node.parentElement 返回父节点,document.parentNode()返回null
  • node.childNodes[1] 符合标准，返回子节点集合（包含文本节点及标签节点），文本和属性节点的childNodes永远是null.先获取长度node.childNodes.length,然后可以通过循环或者索引找到需要的节点.
    //对与文本节点的处理：
    eg:

    var myTextNodes = document.getElementById("test").childNodes;
var count = myTextNodes.length;
for(var i = 0; i < count; i++) {
  if(myTextNodes[i].nodeType=="3" && myTextNodes[i].nodeName!="#text"){//排除IE空白文本的节点
  alert(myTextNodes[i]）;
}
}
  • node.children 不符合标准，不推荐使用，它只返回html节点，甚至不返回文本节点
  • node.firstChild返回第一个子节点，firstChild=childNodes[0]
  • node.lastChild返回最后一个子节点，lastChide=childNodes[childNodes.length-1]
  • node.nextSibling()返回同属下一个节点
  • node.previousSibling()返回同属上一个节点

三、节点操作

  • 节点定位 
    getElementById(elementId)
//寻找一个有着给定id属性值的元素，返回一个元素节点 ,document.getElementById(IDvalue)

getElementsByTagName(tagName)
//用于寻找有着给定标签名的所有元素，document.getElementsByTagName(tagName)

getElementsByName(elementName)
//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可
  • 创建节点： 
    document.createElement(element)
//参数为要新添的节点标签名，egnewnode=document.createElement("div");

document.createTextNode(string)
//创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");

    eg：

    var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
  • 添加节点: 
    //添加子节点：
node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)


//插入节点
node.insertBefore(newNode,targetNode)
node.insertAfter(newNode,targetNode);
  • 修改节点： 
    //删除节点
node.remove()[2] //当某个节点被remove方法删除时，这个节点所包含的所有子节点将同时被删除。
node.removeChild(node) //eg:document.body.removeChild(node)
node.removeNode()//IE支持，但FF不支持,推荐用removeChild代替实现

//替换节点
node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。
node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法，其他浏览器则不支持。
  • 复制节点： 
    //返回复制节点引用
node.cloneNode(bool)//bool为布尔值，true / false 是否克隆该节点所有子节点 ,eg:node.cloneNode(true)
  • 获取节点信息: 
    .nodeName//只读，返回节点名称，相当于tagName.
.nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。
.nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。

node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准compareDocumentPosition() .
node.hasChildNodes()//是否有子节点，返回boolean值
  • 属性节点： 
    setAttribute(key,value)//element.setAttribute(attributeName,attributeValue)，setAttribute()方法只能用在属性节点上。
getAttribute(key)//返回一个给定元素的一个给定属性节点的值

备注:

[1]childNodes兼容性问题说明：

用IE的调试工具会发现IE中把空格解析成“#text”，即IE会把2个标签之间只要有回车或空格的地方解析成空白文本节点，就多了个节点nodeName=”#text”。而FF中却不会。

  • 测试代码：

    //节点之间留有空格和回车
<div id="test1">
<div>first</div>
<div>second</div>
<div>third</div>
</div>

//除注释外，节点间无空格回车
<div id="test2"><div>first</div><div>second</div><div>third</div></div>

var val1=document.getElementById("test1").childNodes.length;
var val2=document.getElementById("test2").childNodes.length;
alert("val1="+val1+":"+"val2="+val2)

  • 测试结果：

    IE中是val1=7:val2=3
    FF中是val1=3:val2=3

  • 兼容性解决办法：

    在for循环里不妨加上：
    if(childNode.nodeName==”#text”) continue;
    或者nodeType == 1。

[2]add(),remove()兼容性问题：

注意的是add,remove方法仅用于area,controlRange,options等集合对象.

<select>
<option value="1">option1</option>
<option value="2">option2</option>
</select>
<script type="text/javascript">
function fnAdd(){//兼容IE,FF,Opera,Chrome
var oOption=document.createElement("option");
document.getElementById("#oList").options.add(oOption);
oOption.text="option3";
oOption.value="3";
}
function fnRemoveChild(){//兼容IE,FF,Opera,Chrome
document.getElementById("#oList")).removeChild(document.getElementById("#oList").lastChild);
}
function fnRemove(){
//兼容IE,FF,Opera,Chrome
document.getElementById("#oList").remove(0);
}
</script>

扩展知识：

innerHTML、outerHTML、innerText、outerText

  • 定义：

    • innerHTML设置或获取标签内的HTML,eg:获取node.innerHTML 设置node.innerHTML=”hello”
    • outerHTML设置或获取标签及标签内的HTML
    • innerText设置或获取标签内的文本
    • outerText设置(包括标签)或获取(不包括标签)对象的文本

  • 不同之处：

    innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

    在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

  • 注意:

    W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)

转载请注明：https://heiniuhaha.files.wordpress.com/2011/02/dom_tree.png

js/ajax/as/flex , ,

前端开发工程师的必须掌握的基本技能

3条评论 Posted by 于 12月 13, 2010
  • DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  • 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  • XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  • 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
  • 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
  • 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  • 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  • HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
  • JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

附：adam lu前端开发面试题：
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图

Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview

10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow

小结：面试只是一个检测技能的手段，我个人更看重面试者分析问题和解决问题的能力以及对前端的热爱。

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：

js/ajax/as/flex, xhtml/css/xml/xsl, 关于前端开发 , , , ,

常用js框架比较

留下评论 Posted by 于 12月 13, 2010

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：
http://adamlu.com/?p=442

js/ajax/as/flex , , , ,

“以人为本”才是好前端

留下评论 Posted by 于 12月 10, 2010

有朋友问我，为什么他去应聘纯粹做js开发，但是总不如意？
我是觉得求职遇到困难应当多思考总结，看看自身有什么不足和应当提高的地方，而不应该发牢骚。另外觉得找不到专做js的企业和团队，也可以换一个角度想一想，会不会是你自己还不知道什么样的企业和团队需要专业的前端开发工程师。
你真的理解了前端开发这个圈子和互联网这个行业吗？
你真的对自己将来的路想明白了吗？
我觉得这些你需要再思考一下……

js只是工具，为什么现在比较“流行”，因为现在web比较流行，为什么web比较流行，因为可以打开浏览器就可以完成你想完成的事情（比如：OA系统，信息获取，webgame之类）而不需要去安装客户端软件，说白了就是为了方便，计算机的出现也是为了方便人们的工作和生活，任何一项发明都会有它的意义。
用户，永远想要通过最简单的方式完成自己想要完成的事，正因为这样，科技才在不断地进步，一切都在“以人为本”。
所以我们用JS不能只考虑到其本身，而要考虑到它能产生的价值，用户用一个系统，不是要求这个系统开发的技术含量有多高，而是它是否满足自己的需求，在体验上好不好。
一门技术，只是在一定的环境下，为需求服务，当然，前提得你要熟悉这门技术，能够运用自如，才能更好地驾驭它。

关于前端开发 , ,