js-DOM,DOM扩展

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()方法能够确认节点间的关系

原文地址:https://www.cnblogs.com/zhanghuiyun/p/5132075.html