Javascript——DOM学习笔记

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>DOM基础</title>
<style type="text/css">
ol li ol li{font-size: 13px;}
</style>
</head>

<body >

<h2>DOM类型</h2>
<ol>
<li><h4>Node类型:</h4>
<ol>
<li>Node.firstChild=Node.childNodes[0],第一个子节点</li>
<li>Node.lastChild=Node.childNodes[Node.childNodes.length-1]最后一个子节点</li>
<li>Node.ownerDocument,返回的是文档对象document</li>
<li>Node.nextSibling,下一兄弟节点</li>
<li>Node.previousSibling,前一个兄弟节点</li>
<li>Node.parentNode,父节点</li>
<li>Node.appendChild,在元素末尾添加一个子节点</li>
<li>Node.insertBefore(),在节点前添加子节点</li>
<li>Node.repalceChild,替换子节点</li>
<li>Node.removeChild,删除子节点</li>
<li>Node.cloneNode(),克隆子节点，当cloneNode(true)，克隆整个子树，false只复制当前节点</li>
</ol>

</li>
<li><h4>Element类型:元素节点，就是标签名,nodeType为1 ，nodeName(tagName也输出标签名，输出都为大写)为标签名，nodeValue值为null</h4>
<ol><h5>查找元素</h5>
<li>getElementById方法()：只返回第一次出现的id，除IE8及以下浏览器区，都分大小写，IE7及以下版本会返回name值与ID相同的表单元素如果该值出现在给定id元素之前</li>
<li>getElementByTagName方法()，返回HTMLCollection数组集合：HTMLCollection中还包含一个nameItem()方法，可以获取到HTMLCollection中name值相同的元素；getElementByTagName("*")能获取到所有元素(IE8及以下还能获取到注释)</li>
<li>getElementByClassName方法()，返回HTMLCollection数组集合</li>
<li>getElementByName()，返回HTMLCollection数组集合，可以用这个方法获取到单选按钮的值，也具有nameItem()方法</li>
</ol>
<ol><h5>获取属性：var div=document.getElementById("id");</h5>
<li>id: div.id</li>
<li>class: div.className</li>
<li>style: div.style(.color/fontSize.....)</li>
<li>title: div.title</li>
<li>备注: 非自定义的特性才能以这种属性方式操作 （IE8及以下允许）</li>
</ol>
<ol><h5>操作特性的三个方法：可以操作自定义特性</h5>
<li>获取：div.getAttribute(特性名可自定义)</li>
<li>设置：div.setAttribute(特性名,值)，通过这个方法设置的特性会统一转化为小写。</li>
<li>删除：div.removeAttribute(特性名,值)，IE6及以前版本不支持</li>
<li>备注:IE7及以前版本，通过get/setAttribute获取设置class和style特性没有任何效果。style返回对象，class可以通过className来设置获取，同时，IE7及以前版本获取事件返回字符串，其他浏览器返回函数</li>
</ol>
<ol><h5>attributes属性:包含NamedNodeMap集合</h5>
<li>getNamedItem():div.attributes.getNamedItem("id").nodeValue==div.attributes["id"].nodeValue==div.getAttribute("id")</li>
<li>removeNamedItem():div.attributes.removeNamedItem("id")</li>
<li>setNamedItem()</li>
<li>item(pos)</li>
<li>备注:保存了所有特性用来做特性遍历可以派上用场，不同浏览器输出顺序会不同，且IE7及之前版本会输出所有特性，所以需要使用div.attributes[i].specifie返回true来确定是否设置了这个属性</li>
</ol>
<ol><li>创建节点:createElement();IE7及以下浏览器在创建input单选按钮以及button-reset按钮时回出现兼容问题，此时我们需要在创建过程中就将属性值写出其中。即：createElement("&lt;button type=\"reset \"&gt;&lt;/button&gt;" );</li></ol>

</li>
<li><h4>Attr属性节点：nodeType为2，nodeName为特性名，nodeValue为特性值</h4>
<ol>
<li>attr=document.createAttribute(属性名("id/lang/title......"))创建属性</li>
<li>attr.value=value,属性赋值</li>
<li>element.setAttributeNode(attr),添加属性到节点</li>
<li>element.getAttributeNode(属性名).value获取属性的值</li>
<li>element.removeAttributeNode(属性名)删除属性</li>
</ol>
</li>
<li><h4>文本节点：就是标签内的纯文本nodeType为3,nodeName为#text,nodeValue为文本内容</h4>
<ol>
<li>创建文本节点：document.createTextNode()</li>
<li>链接文本节点: div.normalValue(),同一元素节点下的同胞文本节点变为同一文本节点</li>
<li>分割文本节点: splitText，文本节点.splitText（分割的位子） </li>
<li>为文本节点赋值text.nodeValue="&lt;div&gt; text&lt;/div&gt;",会直接输出"&lt;div&gt; text&lt;/div&gt;"文本，不会转为HTML文本</li>
</ol>
</li>
<li><h4>document类型:nodeType为9,nodeName为#document,nodeValue为null</h4>
<ol>
<li>document类型只有一个子节点&lt;html&gt;，可以通过document.documentElement</li>
<li>document.body可以直接获取body元素</li>
<li>document.title获取文档标题</li>
<li>document.URL地址栏中的URL</li>
<li>document.domian 获得域名:域名可以松散但不可以再紧绷</li>
<li>document.referrer 获取源页面的地址</li>
<li>特殊集合:document.anchors——文档中所有带name值得&lt;a&gt;元素<br/>document.forms所有&lt;form&gt;元素<br/>document.images所有&lt;img&gt;元素<br/>document.links所有带有href属性的&lt;a&gt;元素</li>
<li>document.write/writeln(输出会一个"\n"),若输出script标签，则结尾标签&lt;/script&gt;需要分开写才能与输出的对应--"&lt;/scr"+"ipt&gt"</li>
</ol>
</li>
<li><h4>DocumentFragment类型：文档片段。nodeType为11,nodeName为#document-fragment,nodeValue为null</h4>
<ol>
<li>document.createDocumentFragment(无参数)来创建文档片段，fragment.appendChild来添加子节点，执行someNode.appendChild(fragment)操作fragment所有子节点都将被转移且被删除</li>
</ol>
</li>
<li><h4>DOM拓展</h4>
<h5>混合模式(backCompat)和标准模式(CSS1Compat)</h5>
<ol>
<li>document.compactMode进行判断</li>
<li>IE又引入documentMode；5为IE5混杂模式，7为IE7混合模式，8为IE8标准模式</li>
</ol>
<h5>滚动</h5>
<ol>
<li>div/body.scrollIntoView()窗口会尽可能的滚动到自身顶部与元素顶部对齐</li>
</ol>
<h5>contain()：firefox不支持，某节点是否包含另一节点</h5>
<ol>
<li>例:document.documentElement.contain(document.body);//true</li>
<li>firefox:document.documentElement.compareDocumentPosition(document.body)//返回20（4+16）</li>
</ol>
<h5>操作内容</h5>
<ol>
<li>innerText:操作所有后代节点中的文本内容，过滤标签(firefox不支持，使用textContent代替)<br/>
innerText中输入的标签会被转译输出并不会成为标签<br/>
兼容判断：
function(e){typeof e.textContent=="string"? e.textContent:e.innerText}
</li>
<li>innerHTML:可以按照指定创建DOM子树<br/>除去IE8及以下插入script标签不会被执行(IE也必须在之前添加作用域内元素)<br/>
添加style元素也有兼容问题：<br/>
//针对opera、Firefox和IE<br/>
div.innerHTML="_&lt;style type=&quot;text/css&quot;&gt;body{background-color:yellow;}&lt;/style&gt;"<br/>
div.removeChild(div.firstChild);<br/>

//针对safari和Chrome需要再将style加入head标签中<br/>
document.getElementByTagName("head")[0].appendChild(div.firstChild);<br/>
IE8提供了window.toStaticHTML()为HTML字符串做无害处理
</li>
<li>outText和outHTML都在原有基础上再包含当前元素进行处理</li>

</ol>
</li>
<li>
<h5>性能与内存</h5>
<ol>
<li>在删除替换innerHTML(子树)时，先删除子树中带有的事件处理程序，元素若绑定事件，在元素删除后，元素与处理程序之间的绑定依然存在于内存中若该情况出现频繁，内存使用会显著增加</li>
<li>尽量少的访问到DOM，这样效率很低，将必要的数据缓存下来，再一次性赋值给DOM</li>
<li>对复用的结构进行封装</li>
</ol>
</li>
</ol>
<h4>备注：DOM操作必须等待HTML元素加载完毕，才可以获取可以设置window.onload=function(){//这里操作}</h2>
</body>
</html>

时间： 2024-12-21 00:15:01

Javascript——DOM学习笔记的相关文章

javascript DOM 学习笔记

前言 DOM介绍     DOM基本知识     DOM操作     DOM查找     DOM类型     DOM表格操作   前言 DOM (文档对象模型)是对 HTML 和 XML 文档操作的编程接口.DOM 的功能就是针对页面上的文档元素进行增.删.改.DOM 发光与得利于 DHTML (动态 HTML )的出现.DOM 是跨平台的应用编程接口(API).DOM 的地位非常重要,所以 W3C 1998年10月1日发布了DOM Level 1 规范.下面是 DOM 规范所提供的功能和 DO

JavaScript DOM学习笔记之标签属性

节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1    --> <a>,<p>...... 属性节点:nodeType值是 2    --> title,href,src...... 文本节点:nodeType值是 3    --> 内容 获取html标签内容: document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容 document.getElementsByTa

JavaScript DOM学习笔记（未完）

获取html内容: 1. document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容 2. document.getElementsByTagName(""):接受一个标签名(所有属于这个标签名的标签组组成一个数组),返回的不是内容,而是包括标签在内的所有内容 利用数组的方式去找到需要操作的标签arr[i]: 3. document.getElementByClassName(""):接受一

JavaScript闭包学习笔记

原文:JavaScript闭包学习笔记 闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解JavaScript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. JavaScript语言的特殊之处,就在于函数内部可以直接读取全局变量. 1 var n=999; 2 3 function f1() { 4 alert

javascript面向对象学习笔记（二）——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

JavaScript正则表达式学习笔记之一 - 理论基础

自从年前得空写了两篇文章之后就开始忙了,这一忙就是2个月??.当时信誓旦旦说的定期写篇博客的计划也就泡汤了??,不过好在最近有空,顺便总结一下这两个月遇到的几个问题.第一个问题就是项目中用到了一些正则才发现之前被自己忽略的正则是时候补一补了.恰逢今天周六??,就把自己学习JavaScript正则表达式的笔记整理成文,写了这篇关于正则表达式理论基础的文章,希望本文能对有需要的同学提供帮助.号外:本文相对基础,大神请忽略??. 一. 基本概念 正则表达式是用于匹配字符串中字符组合的模式. 一种几乎可

Javascript MVC 学习笔记（一） 模型和数据

写在前面 最近在看<MVC的Javascript富应用开发>一书,本来是抱着一口气读完的想法去看的,结果才看了一点就傻眼了:太多不懂的地方了.只好看一点查一点,一点一点往下看吧,进度虽慢但也一定要坚持看完.本学习笔记是对书上所讲解内容的理解和记录. 笔记里的代码大多会按书上摘录下来,因为<MVC的Javascript富应用开发>是结合了JQuery库,所以对于JQuery中不太懂的知识点也会附在代码后面,也算是一些额外的收获. MVC概述 要学习MVC,首先得知道MVC是什么,MV

JavaScript正则表达式-学习笔记（不定期更新）

JavaScript权威指南学习笔记,禁止转载! 8.正则表达式 在常见的字符串检索或替换中,我们需要提供一种模式表示检索或替换的规则. 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串. 使用: /\d\d\d/.test("123");  //true new RegExp("Bosn").test("Hi,Bosn");  //true 正则基础: . 任何字符(除换行符以外) /-/.test('[email prote

JavaScript对象-学习笔记

JavaScript权威指南学习笔记,禁止转载! 5.对象 对象的属性是无序的,每个属性都有一个字符串key和值value, 数据属性的标签:writable.enumerable.configurable.value 访问器属性的标签:enumerable.configurable.get.set.get表示属性可读,set表示属性可写.属性前面有下划线表示只能通过对象方法get/set访问的属性,也就是访问器属性. (1)创建对象 1)字面量var obj={x:1,y:2}; 2)new: