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. August 22nd 2016 Week 35th Monday

    Have you ever given any thought to your future? 你有没有为将来打算过呢? Have you ever given any thought to your ...

  2. 群内大神与你交流WEB经验 业内专家指点就职技巧

    就知道你是一个有理想要抱负的人,不会满足于做一个初级的前端开发工程师.在接下来的这个阶段,我们将走上前端开发的进阶之路,将自己的能力再往上拔高一个等级.同样,薪资也会往上升一个等级!但是,如果你是一个 ...

  3. Mac下java开发环境的搭建与开发工具的安装

    一.安装JDK 1.根据你当前环境的需要,下载相应的JDK并安装,安装步骤与其他Mac软件安装方法相同,我安装的是jdk1.8.0_74.jdk,mac中jdk1.8的默认位置:/Library/Ja ...

  4. valgrind检查C++内存泄漏

    valgrind --tool=memcheck --leak-check=full ./httptest Valgrind 使用 用法: valgrind [options] prog-and-ar ...

  5. 关于Linux环境变量

    查看全局变量:  printenv 查看单个环境变量的值可以用echo命令,必须在环境变量的名称前放一个$符号 如:

  6. hadoop namenode ha--手动切换(转）

    1.hadoop的dfs.nameservices如何配置?2.集群配置中hdfs://mycluster的作用是什么?3.如何将namenode2切换为active状态? 在参考本手册前请确保Had ...

  7. 前端模板artTemplate，handlerbars的使用心得

    写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故. 1,artTemplate 优点: 1,一般web端用得较多,执行速度通常是 Mustache ...

  8. Python内置的HTTP协议服务器SimpleHTTPServer

    [root@ok 6FE5-D831]# python -m SimpleHTTPServer 一条命令,HTTP服务就搭起来了!!! 方便朋友下载,自己的文件!!

  9. javascript - 内置对象 String/Date/Array/Math

    1.构建对象的方法 <script> //构建对象方法 //第1种 var people = new Object(); people.name = "iwen"; p ...

  10. javascript中求浏览器窗口可视区域兼容性写法

    1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:•  window.innerHeight - 浏览器窗口的内部高度•  window. ...