南昌网站建设服务器,经典包装设计案例解析,开发高端产品,wordpress标题换行显示不全Document 对象集合
1. all[]
返回对文档中所有 HTML 元素的引用
说明
all[] 是一个多功能的类似数组的对象#xff0c;它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementBy…Document 对象集合
1. all[]
返回对文档中所有 HTML 元素的引用
说明
all[] 是一个多功能的类似数组的对象它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序如果你知道它们在数组中的确切数字化位置可以直接从数组中提取它们。然而更为常见的是使用 all[] 数组根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name将得到共享同一名称的元素的一个数组。
document.write(document.all[i])
document.write(document.all[name])2. anchors []
返回对文档中所有 Anchor 对象的引用A标签
document.anchors[]
htmlbody
a namefirstFirst anchor/abr /
a namesecondSecond anchor/abr /
a namethirdThird anchor/abr /
br /Number of anchors in this document:
script typetext/javascript
document.write(document.anchors.length)
/script
/body/html
3. applets
返回对文档中所有 Applet 对象的引用
document.applets
4. forms[]
返回对文档中所有 Form 对象引用
document.forms[]
html
bodyform nameForm1/form
form nameForm2/form
form nameForm3/formscript typetext/javascript
document.write(This document contains: )
document.write(document.forms.length forms.)
/script/body
/html5. images[]
返回对文档中所有 Image 对象的引用
提示注释为了与 0 级 DOM 兼容该集合不包括由 标记定义的图像。
document.images[]
htmlbody
img border0 srchackanm.gif width48 height48
br /
img border0 srccompman.gif width107 height98
br /br /script typetext/javascript
document.write(This document contains: )
document.write(document.images.length images.)
/script
/body/html6. links []
返回对文档中所有 Area 和 Link 对象的引用
document.links[]
html
bodyimg srcplanets.gif
width145 height126
usemap#planetmap /map nameplanetmap
area idvenus shapecircle
coords124,58,8
altVenus
hrefvenus.htm /
/map
br /Number of links in this document:
script typetext/javascript
document.write(document.links.length)
/script/body
/html7. scripts[]
返回页面中所有脚本的集合
document.scripts[]
htmlheadmeta charsetutf-8titlezsh/title
/head
bodyscript typetext/javascript
document.write(document.links.length)
/script/body
/htmlDocument 对象属性
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示Document 对象是 Window 对象的一部分可通过 window.document 属性对其进行访问。
1. body
提供对 元素的直接访问。对于定义了框架集的文档该属性引用最外层的 。
2. cookie
设置或返回与当前文档有关的所有 cookie
说明
该属性是一个可读可写的字符串可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
提示该属性的行为与普通的读/写属性是不同的。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
标准写法
document.cookiecookie1value; cookie2value; cookie3value;
过期时间
document.cookieusernameJohn Doe; expiresThu, 18 Dec 2018 12:00:00 GMT
Cookie路径
document.cookieusernameJohn Doe; expiresThu, 18 Dec 2018 12:00:00 GMT; path/;
修改 Cookie
document.cookieusernameJohn Smith; expiresThu, 18 Dec 2013 12:00:00 GMT; path/;
删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可 document.cookie username; expiresThu, 01 Jan 1970 00:00:00 GMT;
设置 cookie 值的函数
function setCookie(cname,cvalue,exdays)
{var d new Date();d.setTime(d.getTime()(exdays*24*60*60*1000));var expires expiresd.toGMTString();document.cookie cname cvalue ; expires;
}函数解析
以上的函数参数中cookie 的名称为 cnamecookie 的值为 cvalue并设置了 cookie 的过期时间 expires。 该函数设置了 cookie 名、cookie 值、cookie过期时间。
获取 cookie 值的函数
function getCookie(cname)
{var name cname ;var ca document.cookie.split(;);for(var i0; ica.length; i) {var c ca[i].trim();if (c.indexOf(name)0) return c.substring(name.length,c.length);}return ;
}函数解析
cookie 名的参数为 cname。 创建一个文本变量用于检索指定 cookie :cname “”。 使用分号来分割 document.cookie 字符串并将分割后的字符串数组赋值给 ca (ca document.cookie.split(‘;’))。 循环 ca 数组 (i0;i
检测 cookie 值的函数
function checkCookie()
{var usernamegetCookie(username);if (username!){alert(Welcome again username);}else {username prompt(Please enter your name:,);if (username! username!null){setCookie(username,username,365);}}
}function setCookie(cname,cvalue,exdays)
{var d new Date();d.setTime(d.getTime()(exdays*24*60*60*1000));var expires expiresd.toGMTString();document.cookie cname cvalue ; expires;
}函数解析
如果设置了 cookie将显示一个问候信息。 如果没有设置 cookie将会显示一个弹窗用于询问访问者的名字并调用 setCookie 函数将访问者的名字存储 365 天
3. activeElement
返回文档中当前获得焦点的元素
返回值: 当前获得焦点的元素。
注意 该属性是只读的。
提示 为元素设置焦点可以使用 element.focus() 方法。
提示可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。
浏览器支持
googleIEfirefoxsafariopera2.04.03.04.09.6
document.activeElement
4. addEventListener
用于向文档添加事件句柄
返回值: 没有返回值。
提示 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
提示IE9以下使用 element.addEventListener() 方法为指定元素添加事件句柄。
浏览器支持
googleIEfirefoxsafariopera1.09.01.01.07.0
document.addEventListener(event, function, useCapture)
参数
必需 event 描述事件名称的字符串。注意 不要使用 “on” 前缀。例如使用 “click” 来取代 “onclick”。 function 描述了事件触发后执行的函数。 当事件触发时事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如 “click” 事件属于 MouseEvent(鼠标事件) 对象。可选 useCapture 布尔值指定事件是否 在捕获或冒泡阶段执行。可能值 true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行。 在 Firefox 6 和 Opera 11.60 中 useCapture 参数是可选的。 在 Chrome、IE 和 Safari 中一直都是可选的。
document.addEventListener(click, myFunction);function myFunction() {document.getElementById(demo).innerHTML Hello World;
}5. baseURI
返回 HTML 文档的基础URI
返回值: 字符串, 代表节点页面的URI。
浏览器支持
googleIEfirefoxsafarioperatruefalsetruetruetrue
document.baseURI
console.log(document.baseURI)6. createAttribute
用于创建一个指定名称的属性并返回Attr 对象属性
返回值: 创建的属性。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.createAttribute(attributename)
参数
必需 attributename 要创建的属性名称。
!doctype html
html langen
headmeta charsetUTF-8/titlezsh/titlestyle.democlass{color:red;}/style
/head
bodyh1Hello World/h1p iddemo单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。/pbutton onclickmyFunction()点我/button
/body
scriptfunction myFunction(){var h1document.getElementsByTagName(H1)[0];var attdocument.createAttribute(class);att.valuedemoclass;h1.setAttributeNode(att);}
/script
/html7. createComment
可创建注释节点
返回值: 创建的注释节点。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.createComment(text)
参数
可选 text 添加的注释文本。
scriptvar Cdom document.createComment(This is Comment Dom);document.body.appendChild(Cdom)
/script
8. createDocumentFragment
创建了一虚拟的节点对象节点对象包含所有属性和方法 当你想提取文档的一部分改变增加或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。 你也可以使用文档的文档对象来执行这些变化但要防止文件结构被破坏createDocumentFragment() 方法可以更安全改变文档的结构及节点。
返回值: 创建文档片段对象。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.createDocumentFragment()
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodyulliCoffee/liliTea/li/ul
p iddemo单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。/p
button onclickmyFunction()点我/button
script
function myFunction(){var ddocument.createDocumentFragment();d.appendChild(document.getElementsByTagName(LI)[0]);d.childNodes[0].childNodes[0].nodeValueMilk;document.getElementsByTagName(UL)[0].appendChild(d);
};/script/body
/html
9. createElement
通过指定名称创建一个元素
返回值: 创建的元素节点。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.createElement(nodename)
参数
必需 nodename 创建元素的名称。
var aLink document.createElement(a);aLink.href http://www.zshgrwz.cn;
aLink.target _blank;
aLink.innerText 我是被创建的A标签哦;document.body.appendChild(aLink)10. createTextNode
创建文本节点
返回值: 创建的文本节点。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.createElement(text)
参数
必需 text 文本节点的文本。
var aLink document.createElement(a);aLink.href http://www.zshgrwz.cn;
aLink.target _blank;var text document.createTextNode(我是被创建的A标签哦);aLink.appendChild(text)document.body.appendChild(aLink)11. doctype
返回与文档相关的文档类型声明
返回值: 文档的文档类型, 作为一个 DocumentType 对象。
注意 如果文档没有指定文档类型,返回值为 null.
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
注意 Internet Explorer 8 及 IE 更早版本显示HTML 和 XHTML文档时该属性返回 null ,但是支持 XML 文档。
document.doctype
console.log(document.doctype);12. documentElement
以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。
注意 如果 HTML 元素缺失返回值为 null。
返回值: 文档的文档元素,作为一个元素对象。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.documentElement
console.log(document.documentElement);13. documentURI
可设置或返回文档的位置。 如果文档由 DocumentImplementation 对象创建, 或者如果它未定义则返回 null。
返回值: 字符串, 代表文档的URI。
浏览器支持
googleIEfirefoxsafarioperatruefalsetruetruetrue
除了 Internet Explorer 浏览器其他浏览器都支持 documentURI 属性。
document.documentURI
console.log(document.documentURI);14. domain
返回下载当前文档的服务器域
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.domain
console.log(document.domain);15. embeds
返回文档中所有嵌入的内容embed集合
document.embeds
console.log(document.embeds);16. getElementsByClassName
返回文档中所有指定类名的元素集合作为 NodeList 对象
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数并循环各个元素来获取你需要的那个元素。
返回值
NodeList 对象表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。
浏览器支持
googleIEfirefoxsafariopera4.09.03.03.19.5
document.getElementsByClassName(classname)
参数
必需 classname 你需要获取的元素类名。 多个类名使用空格分隔如 “test demo”。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodydiv classexample第一 Div 元素 classexample。/div
div classexample第二个 Div 元素 classexample。/div
p点击按钮修改第一个 Div 元素的文本信息索引值为 0 的 classexample)。/p
button onclickmyFunction()点我/button
pstrong注意:/strong Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。/p
script
function myFunction() {var x document.getElementsByClassName(example);x[0].innerHTML Hello World!;
}
/script/body
/html17. getElementById
可返回对拥有指定 ID 的第一个对象的引用
HTML DOM 定义了多种查找元素的方法除了 getElementById() 之外还有 getElementsByName() 和 getElementsByTagName()。
如果没有指定 ID 的元素返回 null
如果存在多个指定ID的元素则返回 undefined。
提示拥有ID属性的DOM元素会在Window下创建一个同名对象此对象就是这个DOM元素。
返回值
指定ID的元素
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.getElementById(elementID)
参数
必需 elementID 元素ID属性值。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodyp iddemo单击按钮来改变这一段中的文本。/p
button onclickmyFunction()点我/button
script
function myFunction(){document.getElementById(demo).innerHTMLHello World;
};/script/body
/html18. getElementsByName
返回带有指定名称的对象的集合
返回值
指定name的元素集合。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.getElementsByName(name)
参数
必需 name 元素name属性值。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
script
function getElements(){var xdocument.getElementsByName(x);alert(x.length);
}
/script
/head
body猫:
input namex typeradio value猫
狗:
input namex typeradio value狗
input typebutton onclickgetElements() value多少名称为 x的元素?/body
/html19. getElementsByTagName
返回带有指定标签名的对象的集合
提示 参数值 “*” 返回文档的所有元素。
返回值
指定标签名的元素集合。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.getElementsByTagName(tagname)
参数
必需 tagname 你要获取元素的标签名。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodyp iddemo单击按钮来改变这一段中的文本。/p
button onclickmyFunction()点我/button
script
function myFunction(){document.getElementsByTagName(P)[0].innerHTMLHello World;
};
/script/body
/html20. implementation
返回处理该文档的 DOMImplementation 对象
提示 参数值 “*” 返回文档的所有元素。
返回值
文档的 implementation 对象, 作为一个DocumentImplementation 对象。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.implementation
console.log(document.implementation);21. importNode
把一个节点从另一个文档复制到该文档以便应用
imported 节点可以试试任何节点类型。
如果 第二个值设置为 true那么还要复制该节点的所有子孙节点。
返回值
另一个文档的节点。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
注意 Internet explorer 8 及 IE 更早版本不支持该方法。
document.importNode(node,deep)
参数
必需 node 要获取的节点。 deep 如果为 true还要递归复制 importedNode 节点的所有子孙节点。
提示非本域名下网址涉及到跨域请求无法直接获取信息
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodybutton onclickmyFunction()点我/button
p iddemo点击上面的按钮以获取和显示在iframe第一个H1元素的值:/p
script
function myFunction(){var framedocument.getElementsByTagName(iframe)[0]var hframe.contentWindow.document.getElementsByTagName(h1)[0];var xdocument.importNode(h,true);document.getElementById(demo).appendChild(x);
};
/script
iframe srchttp://www.zshgrwz.cn styleheight:280px;width:420px;/iframe
pstrongNote:/strong IE 8 及更早的版本不支持importNote方法/p/body
/html22. inputEncoding
可返回文档的编码在解析时
返回值
字符串返回文档编码。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruefalse
注意 Internet explorer 8 及 IE 更早版本不支持该方法。
document.inputEncoding
console.log(document.inputEncoding)23. lastModified
合并相邻的文本节点并删除空的文本节点
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
node.normalize()
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodyp iddemo点击一个按钮来添加文本,点击另一个按钮规范化文档/p
button onclickaddTextNode()添加一个文本节点/button
button onclicknormPara()规范文本/button
script
function addTextNode(){var ydocument.createTextNode( Click again);var xdocument.getElementById(demo);x.appendChild(y);var zdocument.getElementById(cc);z.innerHTMLx.childNodes.length;
}
function normPara(){document.normalize();var xdocument.getElementById(demo); var zdocument.getElementById(cc);z.innerHTMLx.childNodes.length;
}
/script
p上面的段落有 span idcc1/span个子节点。/p/body
/html24. open
打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。
调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后必须记住用 document.close() 方法关闭文档并迫使其内容显示出来。
注意如果目标文件已经存在它将被清除。如果这个方法没有参数会显示一个新窗口(about:blank)。
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.open(MIMEtype,replace)
参数
可选 MIMEtype 规定正在写的文档的类型。默认值是 “text/html”。 replace 当此参数设置后可引起新文档从父文档继承历史条目。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
script
function createDoc(){ var docdocument.open(text/html,replace); var txt!DOCTYPE htmlhtmlbody学习 HTML DOM 很有趣!/body/html; doc.write(txt); doc.close();
}
/script
/head body
input typebutton value新文档 onclickcreateDoc()
/body
/html25. querySelector
返回文档中匹配指定 CSS 选择器的一个元素
注意 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素请使用 querySelectorAll() 方法替代。
返回值
CSS 选择器的第一个元素。 如果没有找到返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
浏览器支持
googleIEfirefoxsafariopera4.08.03.53.110.0
document.querySelector(CSS selectors)
参数
可选 CSS selectors 指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器使用逗号隔开返回一个匹配的元素。
document.querySelector(body)26. querySelectorAll()
是 HTML5中引入的新方法返回文档中匹配的CSS选择器的所有元素节点列表
返回值
CSS 选择器的所有元素。 如果没有找到返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
浏览器支持
googleIEfirefoxsafariopera4.08.03.53.110.0
document.querySelectorAll(CSS selectors)
参数
可选 CSS selectors 指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器使用逗号隔开返回一个匹配的元素。
document.querySelectorAll(body)27. readyState
返回当前文档的状态载入中……
返回值
uninitialized - 还未开始载入loading - 载入中interactive - 已加载文档与用户可以开始交互complete - 载入完成
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.readyState
document.write(document.readyState);28. referrer
返回载入当前文档的来源文档的URL 如果当前文档不是通过超级链接访问的则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
返回值
返回载入当前文档的来源文档的URL
注意本地调试无用
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.referrer
document.write(document.referrer);29. removeEventListener
用于移除由 document.addEventListener() 方法添加的事件句柄
注意: 如果要移除事件句柄addEventListener() 的执行函数必须使用外部函数匿名函数类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。
浏览器支持
googleIEfirefoxsafariopera1.09.01.01.07.0
注意 Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法Opera 7.0 及 Opera 更早版本也不支持。 但是对于这些不支持该函数的浏览器你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄具体查看
document.removeEventListener(event, function, useCapture)
参数
必需 event 要移除的事件名称。注意 不要使用 “on” 前缀。 例如使用 “click” ,而不是使用 “onclick”。 funciton 指定要移除的函数。可选 useCapture 布尔值指定移除事件句柄的阶段。 true - 事件句柄在捕获阶段移除 false- 默认。事件句柄在冒泡阶段移除 注意 如果添加两次事件句柄一次在捕获阶段一次在冒泡阶段你必须单独移除该事件。
!DOCTYPE html
html
head
meta charsetutf-8
titlezsh/title
/head
bodyp Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。/p
p该实例演示了跨浏览器的解决方法。/p
p文档中使用 addEventListener() 方法添加 onmousemove 事件句柄当鼠标移动时会显示随机数。/p
p点击按钮移除事件句柄。/p
button onclickremoveHandler() idmyBtn点我/button
p iddemo/p
script
if (document.addEventListener) {document.addEventListener(mousemove, myFunction);
} else if (document.attachEvent) {document.attachEvent(onmousemove, myFunction);
}
function myFunction() {document.getElementById(demo).innerHTML Math.random();
}
function removeHandler() {if (document.removeEventListener) {document.removeEventListener(mousemove, myFunction);} else if (document.detachEvent) {document.detachEvent(onmousemove, myFunction);}
}
/script/body
/html30. title
可返回当前文档的标题 HTML title 元素中的文本
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.title
console.log(document.title);31. URL
可返回当前文档的 URL
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.URL
console.log(document.URL);32. write
法可向文档写入 HTML 表达式或 JavaScript 代码
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.write(exp1,exp2,exp3,...)
参数
可选 exp1,exp2,exp3,… 要写入的输出流。多个参数可以列出他们将按出现的顺序被追加到文档中。
document.write(exp1,exp2,exp3,...);33. writeln
writeln() 方法与 write() 方法作用相同外加可在每个表达式后写一个换行符
浏览器支持
googleIEfirefoxsafarioperatruetruetruetruetrue
document.writeln(exp1,exp2,exp3,...)
参数
可选 exp1,exp2,exp3,… 要写入的输出流。多个参数可以列出他们将按出现的顺序被追加到文档中。
document.writeln(exp1,exp2,exp3,...);
document.writeln(exp1,exp2,exp3,...);警告 !!!
在 W3C DOM核心文档对象 继承节点对象的所有属性和方法。很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性
document.attributesdocument.hasAttributes()document.nextSiblingdocument.nodeNamedocument.nodeTypedocument.nodeValuedocument.ownerDocumentdocument.ownerElementdocument.parentNodedocument.previousSiblingdocument.textContent 文档内容出自 W3cSchool和菜鸟教程 如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/
