前端开发技术dom编程 笔记

前端开发技术dom|web前端开发

前端开发小技巧总结

一、代码命名规范:

1. 变量使用下划线
2. 函数使用驼峰命名

二、DOM

定义:DOM是一套对文档的内容进行抽象和概念化的方法.
D: 文档 document
O: 对象 object
M: 模型 Model

*DOM是一种适用于多种环境和多种程序设计语言的通用型API。文档

文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已
一个文档就是一颗节点树
节点分类:
DOM的原子是元素节点(element node)、文本节点(text node)、属性节点(attribute node

* 获取元素
通过id获取元素

getElementById 通过id获取元素
document.getElementById(“id”);
文档上每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象

通过标签名获取元素

getElementsByTagName方法返回一个对象数组,每个对象分别对应这文档里的有着给定标签的一个元素;
document.getElementsByTagName(“li”)返回文档中所有的li标签
如果你要知道某份文档中总共由多少个元素节点,可以用通配符
document.getElmentByTagName(“*”).length

通过类名获取元素

getElmentByClassName, 整个方法我们能够通过class属性中的类名类访问元素
这个方法还可以查找那些带有多个类名的元素, 指定多个类名, 只要在字符串参数中用空格分隔类名即可。
document.getElmentsByClassName(“important sale”).length
这个getElementsByClassName方法非常有用, 但只有比较新的浏览器才支持它, 所以呢要自己实现这个方法
function getElementsByTagClassName(node, calssName) {
if (node.getElementsByClassName) {
//使用现有的方法
returnnode.getElementsByClassName(calssName);
}else{
varresults=newArray();
varelems=node.getElementsByTagName(“*”);
for (vari=0;i<elems.length;i++) {
if (elems[i].className.indexOf(calssName) !=-1) {
results[results.length] =elems[i];
}
}
}
returnresults;
}

* 获取和设置属性
获取和设置属性

1. getAttribute
*
它是一个函数, 一个参数—查询属性的名字*
不属于document对象, 不能通过document调用*
object.getAttribute(attribute) 例如: obj.getAttribute(“title”) //获取标签title属性
2. setAttribute
*
对属性节点的值做出修改*
object.setAttribute(attribute,value)
  • childNodes属性

childNodes属性

在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组
element.childNodes
注意:
由childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点,几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而他们全都包含在childNodes属性返回的数组中。
  • nodeType属性
    nodeType属性
每一个节点都有nodeType属性
nodeType属性共有12种可取值,但其中仅有3种具有实用价值。
[X] 元素节点的nodeType属性值为1
[X] 属性节点的nodeType属性为为2
[X] 文本节点的nodeType属性值为3

* nodeValue属性
nodeValue属性

* 如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,它用来得到一个节点的值:
node.nodeValue
注意:
node应该是该标签的文本节点,只有文本节点才会由nodeValue。
例如: p.nodeValue 得到的是一个null值。 而你真正需要的是元素所包含的文本的值。包含在元素的文本是另一种节点,他是元素的第一个子节点。因此你想要得到的其实是它的第一个子节点的nodeValue的属性值。
所以要这么获得: p.childNodes[0].nodeValue;
*设置一个节点的值
p.childNodes[0].nodeValue = “666666666”;
*nodeName
返回标签名称
nodeName属性总是返回一个大写字母的值
例如: if(placeholder.nodeName != “IMG”) return false;

三、DHTML

*    DHTML是 "Dynamic html"(动态html)的简称。DHTML并不是一项新技术,而是描述htmlcss、JavaScript技术组合的术语。
* 1、利用html把网页标记和各种元素;
* 2、利用css设置元素样式和探秘的显示位置;
* 3、利用javaScript实时地操控页面和改变样式

四、JavaScript语法

  4.1 用javaScript编写的语法必须通过html/XHTML文档才能执行。

* 将JavaScript代码放到文档<head>标签中的<script>标签之间:
* 典型的做法是将JavaScript代码作为一个扩展名为.js的独立文件,再文档的<head>部分放一个<script>标签,并把他的src属性指向该文件;
* 最好是把<script>标签放到html文档的最后,<body/>之前,这样能使浏览器更快的记载页面;

 4.2 语句

* 多条语句放在同一行上,就必须使用分号来隔开它们: 

     first statement;  scond statement;

*  注释:
  **javascript 注释**
1.使用双斜杠
//自我提醒:有注释是好事
注意点:使用这种注释方式,就必须再每个注释的开头加上两个斜线,例如像下面这样就会出问题
//自我提醒:
有注释是好
—————————-分割线———————————————
2.再注释内容的开头加上一个斜线和一个星号(/*),在注释内容的末尾加上一个星号和一个斜线(/*)
/*自我提醒:
有注释是好事*/
这种注释方式在需要插入大段的注释时很有用,他可以提高整个脚本的可读性。
—————————-分割线———————————————
3. 还可以使用HTML的注释风格,其实JavaScript解析器对”<!–“的处理与对“//”的处理是一样的:
<!–这是JavaScript中的注释
如果在HTML文档中,还需要以”–>”来注释结尾
<!–这是HTML中的注释–>
注意:
1.JavaScript不要求这样坐,它会把“–>”当作注释内容的一部分
2.HTML允许上面那样注释跨越多行,但JavaScript要求每行都必须在开通加上“<!–”来作为标志
3.JavaScript解释器在处理这种风格的注释时与大家所熟悉的HTML做法不同,为避免发生混淆,最好不要在JavaScript脚本中使用这种风格的注释。建议大家使用“//”来注释单行,用“/*”注释多行
  • 变量
    javascript 变量
1. 对某个变量赋值之前未声名,赋值操作将自动声明该变量。(ps:虽然JavaScript没有强制要求程序员必须提前声明变量,但提前声明变量是一种良好的编程习惯)
varmood;
varage;
*不必单独声明每个变量,你也可以用一条语句一次声明多个变量
varmood, age;
*也可以一石二鸟:把声明变量和对该变量的赋值一次完成:
varmood=”happy”,age=33;
注意点:
*变量和其他语法元素的名字都是区分大小写的(ps:MOOD和mood是完全不一样的)
*不允许变量包含空格或标点符号(美元符号“$”除外)
*数据类型(必须明确类型声明的语音成为强类型语言, JavaScript不要进行类型声明,因此他是一种弱类型语言 )
1.字符串
*字符串由零个或多个字符构成。字符串包括(但不限于)字母、数字、标点符号和空格。字符串必须包括在引号里,单引号或双引号都可以
varmood= ‘happy’;
varmood2=”happy”;都是可行的
*注意:如果字符串里包含双引号,就把整个整个字符串放在单引号里; 如果字符串包含单引号,就把整个字符串放在双引号里;
varmood=”don’t ask”;
*如果想在上面这条语句种使用单引号,就必须保证“n”和“t”之间的单引号能被当成真个字符串的一部分。这种情况下真个单引号需要被看成一个普通字符,而不是真个字符串的结束标志,这种情况我们需要对这个字符进行转义。在JavaScript里用反斜杠进行转义:
varmood=”don\’t ask”;
*类似的,如果想用双引号来包住一个本身就包含双引号的字符串,就必须用反斜杠对字符串中的双引号进行转义:
varheight=”aboout 5’10\” tall”;
—————————————分割线———————————————————-
2. 数组
*JavaScript中,数组可以用关键字Array声明。声明数组的同时还可以指定数组初始元素个数,也就是数组的长度:
varbeatles=Array(4);
*向数组中添加元素叫做填充
array[index] =element;
*字面量初始化
varbeatles= [“John”,”Paul”,”George”,”Ringo”];
*对象
对象时自包含的数据集合,包含在对象里的数据可以通过两种形式访问-属性(property)和方法(method):
[X] 属性时隶属于某个特定对象的变量
[X] 方法是只有某个特定对象的变量
对象就是由一些属性和方法组合在一起而构成的一个数据实体
JavaScript语言里的对象可以分为三种类型;
[X] 用户自定义对象:由程序员自行传教的对象。
[X] 内建对象:内建对象在JavaScript语言里的对象,如Array、Math和Date等;
[X] 宿主对象:由浏览器提供的对象

五、变量的作用域

1. 全局变量(global varable)可以在脚本中的任何位置被引用。(ps:全局变量的作用域就是整个脚本)
2. 局部变量(local variable)只存在于声明她的那个函数内部。(ps:局部变量的作用域仅限于某个特定的函数)  

var 关键字明确的为函数变量设定作用域

* 如果在某个函数中使用了var,那个变量就将被视为一个局部变量,它只存在整个函数的上下文中。 反之如果没有使用var,那么变量就将被视为一个全局变量。
* 在定义一个函数时,我们一定要把他的内部变量全部都明确的声明为局部变量。

六、最佳实践

####* 质疑一切

如果要使用JavaScript就要确认,这么做会对用户的浏览体验产生怎么样的影响?
如果用户的浏览器不支持JavaScript怎么办

* 平稳退化
* 结构样式分离

文档结构和文档样式的分离可以确保网页都能平稳退化。具备css支持的浏览器固然可以把网页呈现的美轮美奂,不支持或禁用了css功能的浏览器同样可以把网页的内容按照正常的结构显示出来。

* 渐进增强

所谓渐进增强就是用一些额外的信息去包裹原始数据。按照“渐进增强”原则创建出来的网页(如果不是“全部”的话)都符合“平稳退化”原则;

* 向后兼容
* 对象检测

对象检测

针对这一问题的最简单的解决方案是,检测浏览器对JavaScript的支持程度
这种解决方案很容易实现:只要把某个方法打包在一个if语句里,就可以个根据这条if语句的条件表达式的求值结果是true还是false来决定应该采取怎样的行动。这种检测成为对象检测。
if(method){
statement;
}
在对象检测时,一定删掉方法名后面的圆括号,如果不删掉,测试的将是方法的结果,无论方法是否存在:
function myFunction(){
if(document.getElementById){
statementsusinggetElementById
}
}
* 浏览器嗅探技术
* 性能考虑

javascript性能考虑

1. 尽量少访问DOM和尽量减少标记
访问DOM的方式对脚本性能会产生非常大的影响。
示例代码:
if (document.getElementsByTagName(“a”).length > 0) {
varlinks=document.getElmentsByTagName(“a”) {
for(vari=0; i < links.length; i++){
//对每个链接做点处理
}
}
}
首先, 它取得了所有 < a > 元素, 然后检查它们个数是不是大于0:
if (document.getElementsByTagName(“a”).length > 0) {
然后, 如果大于0, 它会再次取得所有的<a>元素, 循环遍历这些元素并应用某些操作;
varlinks=document.getElementByTagName(“a”);
for (vari=0;i<links.length;i++) {
虽然这段代码可以运行, 但它不能保持最优的性能。 不管什么时候, 只要查询DOM中的某些元素, 浏览器都会搜索整个DOM树, 从中查找可能匹配的元素。 这段代码居然使用了两次getElementByTagName方法去执行相同的操作, 浪费了一次搜索。 更好的办法时把第一次搜索到的结果保存在一个变量中, 然后在循环里重用该结果比如
varLinks=document.getElementsByTagName(“a”);
if (links.length >0) {
for (vari=0;i<links.length;i++) {
//对每个链接做点处理
}
}

* 合并和放置脚本

javascript 代码

包含脚本的最佳方式就是使用外部文件,因为外部文件和标记能清晰的分离开,而且浏览器也能对站点中的多个页面重用缓存过的相同脚本。
不过类似下面这种情况也不要出现:
<script scr=”functionA.js”></script>
<script scr=”functionB.js”></script>
<script scr=”functionC.js”></script>
<script scr=”functionD.js”></script>
推荐做法就是把functionA.js functionB.js functionC.js functionD合并到一个脚本文件中;
这一就可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时首先要考虑的。脚本在标签中的位置对页面的初次加载时间也有很大影响。
把所有<script>标签都放在文档的末尾,</body>标记之前,就可以让页面变得更快。

* 压缩脚本

所谓压缩脚本,指的就是脚本文件中不必要的字节,如空格和注释,统统删除,从而达到“压缩”文件的目的;

六、共享onload事件

共享onload事件

网页加载完毕时会触发一个onload事件, 这个事件与window对象相关联。
window.onload = func;
这样并不是很完美, 如果我有funcA funcB。 如果想让他们俩都在页面加载时得到执行, 如果它们逐一绑定到onload事件上, 它们当中将只有最后那个才会被实际执行:
window.onload = funcA;
window.onload = funcB;
还有一个解决方法就是
window.onload = function () {
funcA();
funcB();
}
它确实能很好的工作 – 在需要绑定的函数不是很多的场合, 这应该时最简单的解决方案了。
下面这个弹性最佳的解决方案。 不管你打算在页面结束后执行多少个函数, 它都应付字符。
[X] 把现有的window.onload事件处理函数的值存入变量oldonload[X] 如果在这个梳理函数上还没有绑定任何函数, 就像平时那样把新函数添加给它[X] 如果在这个处理函数上已经绑定了一些函数, 就把新函数追加到现有指令末尾;
function addLoadEvent(func) {
varoldOnload= window.onload;
if (typeof window.onload!=’function’) {
window.onload = func;
}else{
window.onload = function () {
oldOnload();
func();
}
}
}

七、动态创建标记

动态创建标记

* document.write
document 对象的write方法可以方便快捷的把字符串插入到文档中。
例如:document.write(“This is inserted.”)
缺点:它违背了“行为应该与表现分离”,避免使用document;
*innerHTML属性
现如今所有的浏览器几乎都支持属性innerHTML,这个属性并不是W3C DOM标准的组成部分。它会返回一段HTML代码
*innerHTML属性可以用来读、写某给定元素里的HTML内容
*innerHTML属性无细节可言。想要获得细节,就必须使用DOM方法和属性。标准化的DOM像手术刀一样精细,innder属性就像一把大锤那样粗放。
*需要将一大段HTML内容插入网页时,innderHTML属性更适用。它支持读写;
*一旦使用了innerHTML属性,他的全部内容将都被替换
*innerHTML不会返回任何对刚插入的内容的引用
*innerHTML属性要比document.write()方法更指定推荐。使用innderHTML属性,你就可以把JavaScript代码从标记中分离出来。用不着再标记的<body>部分插入<script>标签

八、DOM方法

* createElement方法

* createElement方法**

创建一个新元素
document.createElement(nodeName);
例如:创建一个p元素
var pTag = document.createElement(”p”);
* appendChild方法

appendChild方法

把新创建的节点插入某个文档的节点树;
parent.appendChild(child);
例如:
var para = document.creatElement(“p”);
testDiv.appendChild(para);
* createTextNode方法

createTextNode方法

创建文本节点
document.creatTextNode(text);
例如: 创建一个 “Hello world”
的文本节点
var text = document.createTextNode(“Hello world”);
para.appendChild(text);
完整代码
window.onload = function () {
varpara=document.createElement(“p”);
vartxt=document.createTextNode(“Hello world”);
para.appendChild(txt);
vartestDiv=document.getElementById(“testDiv”);
textDiv.appendChild(para);
}

* insertBefore()方法

insertBefore()方法

在已有元素前插入一个新元素
调用此方法,你必须高速它三件事
(1)新元素:你想插入的元素(newElment)
(2)目标元素:你想把这个新元素插入到哪个元素(targetElement)之前
(3)父元素:目标元素的父元素(parentElement)
下面是这个方法的调用语法
parentElement.insetBefore(newElement,targetElement);
*在已有元素后面加入一个元素
这个方法js并没有给我们实现我们就要自己实现了
function insertAfter(newElement,targetElement){
varparent=targetElement.parentNode;
if (parent.lastChild ==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
前端开发技术dom|网站前端开发
https://www.rokub.com
» 本文来自:前端开发者 » 《前端开发技术dom编程 笔记》
» 本文链接地址:https://www.rokub.com/3295.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!