DOM:

1、 了解节点的信息：nodeName（属性的标签名），nodeValue两个属性

在取得信息之前要进行判断是不是节点，节点类型由12个数值常量进行表示

2、每个节点都有一个childNodes属性，其中保存着一个NodeList对象，它是一种类数据对象，用于保存一组有序的节点，可以通过位置来访问这些节点

在访问NodeList中的节点，可以通过方括号，也可以通过item（）方法：

var firstChild=someNode.childNodes[0];

var firstChild=someNode.childNodes.item(1);

var count=someNode.childNodes.length;

3、对arguments对象使用Array.prototype.slice（）方法可以将其转化为数组，采用同样的方法也可以将NodeList对象转化为数组

4、通过使用每个节点的previousSibling以及nextSibling属性，可以访问同一列表中的其他节点，列表中的第一个节点的previousSibling为null，最后一个节点的nextSibling也为null

5、hasChildNodes（）方法是在节点包含一个或多个子节点的时候返回true

6、ownerDocument属性指向表示整个文档的文档节点

7、向childNodes列表的末尾添加一个节点--appendChild（）方法，更新完成后，appendChild（）返回新增的节点

var returnedNode=someNode.appendChild(newNode);

alert(returnedNode==newNode);  //true

alert(someNode.lastChild==newNode);  //true

任何节点也不能同时出现在文档的多个位置上

8、插入节点：

将节点放在childNodes列表中的某个特定的位置上，而不是放在末尾，那么可以使用insertBefore（）方法，接收两个参数，要插入的节点以及作为参照的节点。插入节点后，插入的节点就会成为参照节点的前一个同胞节点，同时被方法返回；如果参照的节点为null，那么执行与appendChild（）一样的操作

9、替换节点：

replaceChild（）方法接收两个参数，要插入的节点以及要替换的节点，要替换的节点将由这个方法返回并从文档树中被移除，同时要插入的节点占据其位置

10、移除节点：

removeChild（要移除的节点）

并不是所有类型的节点都有子节点，所以说要使用上述的方法之前要先取得父节点，也就是parentNode属性

11、有两个方法是所有类型的节点都有的，第一个是cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本，接收一个布尔值参数，表示是否执行深复制，true的情况下进行复制，也就是复制节点以及整个子节点树；false的情况下复制节点本身。复制后的节点副本属于整个文档所有，但没有为他指定父节点

12、normalize（），这个方法的唯一作用就是处理文档树中的文本节点

13、Document类型：

A：documentElement属性指向页面的<html>元素

B：document.documentElement  -----取得对<html>的引用

document.body    ----直接指向<body>元素

document.doctype   ---取得对<!DOCTYPE>的引用

document.title  - ---取得文档标题  document.title=“zhanghuiyun”

C：3个与网页请求有关的属性：

URL：页面完整的URL

domain：只包含页面的域名

referrer：保存着链接到当前页面的那个页面的URL

D：取得元素的操作：

getElementById()

getElementsByTagName()  ---

E：在表单中的name与其他id相同，则在getElementById()两个都会找到，谁在前面对谁进行操作

F：使用getElementByName()的方法是取得单选按钮

G：特殊的集合：

document.anchors  ---包含文档中所有带name特性的<a>元素

document.forms  -----包含文档中的<form>元素

document.images    -----文档中的所有<img>元素

document.links    --------包含文档中所有带href特性的<a>元素

H：将输出流写入到网页中的能力：write（）；writeln（）；close（）；open（）

14、Elemwnt类型:

A: 操作特性的DOM3个方法：getAttribute（）；setAttribute（）；removeAttribute（）

B:removeAttribute()彻底删除元素的特性

C：attribute属性

getNamedItem（name）：返回nodeName属性等于name的节点

removeNamedItem（name）：从列表中移除nodeName属性等于name的节点(返回的是删除特性的Attr节点)

setNamedItem（node）：向列表中添加节点，以节点的nodename属性为索引

item（pos）：返回位于数字pos位置处的节点

var id=element.attribute[“id”].nodeValue;

element.attribute[“id”].nodeValue=”zhang”;

D：创建元素：document.createElement（）方法，接收一个参数，即创建元素的标签名

var div=document.createElement(“div”);

E:Text类型

可以通过nodeValue以及data属性访问Text节点中包含的文本

appendData（text）：将text添加到节点的末尾

deleteData（offset，count）：从offset指定的位置开始删除count个字符

insertData(offset,text):在offset指定的位置插入text

replaceData（offset，count，text）：用text替换从offset指定的位置开始到offset+count为止的文本

splitText（offset）：从offset指定的位置将当前文本节点分为两个节点

substringData（offset，count）：提取从offset指定的位置开始到offset+count为止处的字符串

在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在

F:修改文本节点的内容：div.firstChild.nodeValue=”zhanghuiyun”;

var textNode=div.firstChild;

G:创建文本节点：document.createTextNode（）创建文本节点，接收一个参数-要插入节点中的文本；

var textNode=document.createTextNode（”<strong>HELLO</strong>word！”）；

G:

var element=document.createElement("div");

element.className="message";

var textNode=document.createTextNode("hello world");

element.appendChild("textNode");

document.body.appendChild(element);

//如果两个文本节点时相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格

H：将文本节点合并为一个节点：normalize（）方法

分割文本节点：splitText（指定位置）

15、注释在DOM中是用一个comment类型

与Text类的区别，没有splitText（）方法，也可以通过nodeValue以及data属性获取注释的内容

16、DocumentType类型

17、元素的特性在DOM中用Attr类型表示，Attr对象有3个属性：name，value，specified

var attr=document.createAttribute("align");

attr.value="left";

element.setAttributeNode(attr);

alert(element.attribute["align"].value);

alert(element.getAttributeNode("align".value));

alert(element.getAttribute("align"));

18、  //创建table

var table=document.createElement("table");

table.border=1;

table.width="100%";

//创建tbody

var tbody=document.createElement("tbody");

table.appendChild(tbody);

//创建第一行

tbody.insertRow(0);

tbody.rows[0].insertCell(0);

tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));

tbody.rows[0].insertCell(1);

tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

document.body.appendChild(table);

DOM扩展：

1、querySelector（）方法

//取得body元素

var body=document.querySelector("body");

//取得id为myDiv的元素

var myDiv=document.querySelector("#myDiv");

//取得类为“selected”的第一个元素

var selected=document.querySelector(".selected");

//取得类为“button”的第一个图像元素

var img=document.body.querySelector("img.button");

2、//取得<div>中的所有<em>元素

var ems=document.getElementById("myDiv").querySelectorAll("em");

3、在操作类名的时候，需要通过className属性添加、删除以及替换类名，因为className中是一个字符串，即使只修改字符串的一部分，也必须每次都设置整个字符串的值

4、 classList属性：add（）--将给定字符串值添加到列表中，如果值存在就不添加；contains（）----表示列表中是否存在给定的值，存在返回true；remove（）--从列表中删除给定字符串；toggle（）--如果列表中以及存在给定的值，删除它，列表中没有给定的值，添加它；

div.class.remove(“user”);

迭代类名：

for(var i=0,len=div.classList.length;i<len;i++){

doSomething(div.classList[i]);

}

5、焦点管理：

document.activeElement属性，该属性始终会引用DOM当前获得了焦点的元素，元素获得焦点的方式：页面加载，用户输入，focus（）方法

document.hasFoucs（）方法，该方法用于确认文档是否获得了焦点

6、readyState属性，document.readyState，是通过它实现一个指示文档已经完成的指示器，属性值loading（正在加载文档）；complete（已经加载完文档）

7、字符集属性：

charset属性表示文档中实际使用的字符集，默认值是“UTF-16”，document.charset=“UTF-8”

8、HTML5规定可以为元素添加非标准的属性，但要添加前缀data-

添加属性之后，可以通过元素的dataset属性来访问自定义属性的值

<div id="myDiv" data-appId="12345" data-myname="zhang"></div>

var appId=div.dataset.appId;

var myName=div.dataser.myname;

div.dataset.appId=2345;

div.dataset.myname="zhanghui";

9、插入标记

A：在读模式：innerHTML属性返回与调用元素的所有子节点对应的HTML标记；在写模式：innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点

并不是所有的元素都支持innerHTML的元素，不支持的有：<col>,<colgroup>,<framset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>

B:outerHTML属性：

C：插入标记的另一中方法：insertAdjacentHTML（）方法，接收两个参数，插入位置以及要插入的HTML文本

第一个参数必须是以下4个之一：

beforebegin—在当前元素之前插入一个紧邻的同辈元素；

afterbegin----在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素

beforeend---在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素

afterend----在当前元素之后插入一个紧邻的同辈元素

D: var itemsHtml="";

for(var i=0,len=value.length;i<len;i++)

{

itemsHtml+="<li>"+value[i]+"</li>";

}

ul.innerHTML=itemsHtml;

10、滚动页面scollIntoView()方法，支持的浏览器：IE,Firefox，Safari，Opera scollIntoViewIfNeeded(alignCenter):只有当前元素在视口不可见的时候，才滚动浏览器窗口或容器元素，最终让他可见，将参数设置为true，表示尽量将元素显示在视口中部

scollByLines(lineCount):将元素内容滚动指定行高

scollByPages(pageCount):将元素的内容滚动指定的页面高度，具体高度由元素的高度决定的

11、document.documentMode属性可以知道给定页面使用的是什么文档模式

12、children属性：返回元素的子节点列表 ----与childrenNodes属性基本一致

13、contains（）方法判断某个节点是不是另一个节点的后代，调用的节点时搜索开始的节点，接收一个参数-要检测的后代，同时compareDocumentPosition（）方法能够确认节点间的关系

js-DOM，DOM扩展的更多相关文章

  1. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  2. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  3. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  4. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  5. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  7. JavaScript高级程序设计-10.11: DOM及其扩展

    什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(do ...

  8. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  9. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  10. DOM是什么？有什么用处？js与DOM啥关系？

    本文转载于:https://blog.csdn.net/u012155729/article/details/78135393 转载仅供自己后期学习 DOM简介大家都想知道dom是什么,翻了各种文档, ...

随机推荐

  1. 【leetcode】Maximum Gap(hard)★

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  2. Mysql 死锁的详细分析方法

    用数据库的时候,偶尔会出现死锁,针对我们的业务系统,出现死锁的直接结果就是系统卡顿.客户找事儿,所以我们也在想尽全力的消除掉数据库的死锁.出现死锁的时候,如果只是想解锁,用show full proc ...

  3. UINavigationController导航条是否挡住下面的内容

    控制 UINavigationController 导航条是否挡住下面的内容 if ([[[UIDevice currentDevice] systemVersion] floatValue] > ...

  4. StoryBoard和代码结合 按比例快速兼容iPhone6/6 Plus教程

     转:http://www.cocoachina.com/ios/20141230/10800.html 编者注:根据网友们的评论,文章中的方法有很大的局限性,请谨慎使用! 现在由于苹果公司出了6和6 ...

  5. max number of threads [1024] for user [lish] likely too low, increase to at least [2048]

    # cat /etc/security/limits.d/-nproc.conf # Default limit for number of user's processes to prevent # ...

  6. MVC – 4.mvc初体验(1)

    1.MVC请求模式   2.MVC简单请求流程图 展开 折叠     3.返回string的mvc方法 展开 折叠   4.加载视图的方法  

  7. C#值类型与引用类型

    值类型(Value Type),值类型实例通常分配在线程的堆栈(stack)上,并且不包含任何指向实例数据的指针,因为变量本身就包含了其实例数据.其在MSDN的定义为值类型直接包含它们的数据,值类型的 ...

  8. [LeetCode] Maximal Rectangle

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...

  9. SPOJ220 Relevant Phrases of Annihilation(后缀数组)

    引用罗穗骞论文中的话: 先将n 个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开,求后缀数组.然后二分答案,再将后缀分组.判断的时候,要看是否有一组后缀在每个原来的字符串中至少出现两次,并 ...

  10. JavaScript - 基本概念

    相等操作符 == 和 != 是先转换再比较 === 和 !== 是直接比较,不经过转换 中文翻译上来说叫做相等和全等.类型转换简单的概括就是高级转低级,比如说布尔字符串转数字,对象取值再转.相等比较有 ...