title属性样式原⽣dom_HTMLDOM对象的属性和⽅法介绍（原
⽣JS⽅法）
HTML DOM对象的属性和⽅法介绍
DOM 是 Document Object Model(⽂档对象模型)的缩写。
DOM(⽂档对象模型)是针对HTML和XML⽂档的⼀个API(应⽤程序编程接⼝)，它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
核⼼ DOM - 针对任何结构化⽂档的标准模型
XML DOM - 针对 XML ⽂档的标准模型
HTML DOM - 针对 HTML ⽂档的标准模型
HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：
1.Document 类型
在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性
引⽤⽂档的⼦节点
documentElement
var html = document.documentElement; //取得对元素的引⽤
body
var body = document.body; //取得对
元素的引⽤
获取⽂档信息
title
通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title; //返回当前⽂档的标题
document.title = "New title"; //修改当前⽂档的标题
URL
该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：
这些信息就是当前⽂档完整的 URL。
var url = document.URL; //返回当前⽂档完整的URL
domain
该属性返回当前⽂档的服务器域名。
还是上⾯的地址，域名就是 wwwblogs。
var domain = document.domain; //返回当前⽂档的域名
referrer
该属性包含着链接到当前⽂档的源页⾯的 URL。
⽐如 A 页⾯上有个超链接，超链接指向 B 页⾯，我们在 A 页⾯点击了这个超链接，于是打开了 B 页⾯，此时，B 页⾯的 referrer 属性值就是 A 页⾯的完整 URL。但 A 页⾯并不是通过点击其他超链接打开的，所以 A 页⾯的 referrer 属性值是空字符串 ""。
var referrer = ferrer; //返回链接到当前页⾯的源页⾯的URL
lastModified
var lastModified = document.lastModified; //返回当前⽂档最后被修改的⽇期和时间
document.lastModified; //输⼊这⾏代码
"01/17/2017 11:58:34" //返回的信息
cookie
这个属性可以访问和设置与当前⽂档相关的所有 cookie。
var cookie = kie; //返回与当前⽂档相关的所有cookie
1.2 ⽅法
查元素
getElementById()
该⽅法接受⼀个参数，即希望获取的元素的 ID 名称。到相应的元素后会返回该元素。
some text
var p = ElementById("p:); //取得对 p 元素的引⽤
getElementsByTagName()
该⽅法接受⼀个参数，即希望获取的元素的标签名。
返回的是⼀个 HTMLCollection 对象，这个对象包含了带有指定标签名的所有元素。该对象有 length 属性。
要访问 HTMLCollection 对象中的某项，可以⽤⽅括号语法或 item() ⽅法或 namedItem() ⽅法。
可以向⽅括号内传⼊数字或者字符串。在后台，对数字索引调⽤ item() ⽅法，对字符串索引调⽤ namedItem() ⽅法。
namedItem() ⽅法，接受⼀个参数，即元素的 name 特性值。返回带有给定 name 特性的元素。如果有多个元素 name 特性值相同，只返回第⼀个元素。
HTML
CSS
Javascript
var images = ElementsByTagName('img'); //取得对所有元素的引⽤
//访问某项
alert(images.length); //"3"
alert(images[0]); //返回第⼀个元素
alert(images["fc"]); //返回第⼀个元素
alert(images.item(0)); //返回第⼀个元素
alert(images.namedItem("fc")); //返回第⼀个元素getElementsByName()
这个⽅法接受⼀个参数，即 name 属性的值，返回带有给定 name 属性值的所有元素。常⽤此⽅法取得单选按钮。这个⽅法也会返回⼀个 HTMLCollection 对象。
你喜欢下列哪个品牌的⼿机
苹果
华为
OPPO
⼩⽶
魅族
var brands = ElementsByName('phone'); //返回⼀个列表，包含所有 radio 元素
alert(brands[1].value); //返回列表中第⼆个 radio 元素的 value 属性的值
alert(brands.item(1).value); //返回列表中第⼆个 radio 元素的 value 属性的值
getElementsByClassName()
HTML 5 定义了该⽅法。
这个⽅法接受⼀个参数，即 class 特性值，返回带有给定 class 特性的所有元素。
2.Node 类型
2.1 属性
基础属性
nodeType
该属性表⽰元素的节点类型，返回⼀个数字。
不同类型节点的 nodeType 值不⼀样。
类型
数值
说明
备注
ELEMENT_NODE
1
元素节点
常⽤
属性节点
常⽤
TEXT_NODEhtml document是什么
3
⽂本节点
常⽤
CDATA_SECTION_NODE
4
CDATA区段节点
ENTITY_REFERENCE_NODE
5
实体引⽤名称节点
ENTITY_NODE
6
实体名称节点
PROCESSING_INSTRUCTION_NODE 7
处理指令节点
COMMENT_NODE
8
注释 节点
常⽤
DOCUMENT_NODE
9
⽂档节点(⼜名根节点)
常⽤
DOCUMENT_TYPE_NODE
10
⽂档类型节点
DOCUMENT_FRAGMENT_NODE
11
⽂档⽚段节点
DTD声明节点
nodeName
该属性返回节点的名称，是元素的标签名。
返回的标签名是⼤写字母。
1. 第⼀名：张⽔⽔
2. 第⼆名：黄糊糊
3. 第三名：安莘婉
ElementById('rank').nodeName); //"OL"
nodeValue
该属性返回节点的值，值取决于节点的类型。
ownerDocument
该属性返回整个⽂档对象。
在对返回来的对象进⾏第⼀个⼦节点检测时，返回的是⽂档声明：……………………………>。
1. 第⼀名：张⽔⽔
2. 第⼆名：黄糊糊
3. 第三名：安莘婉
some text
var lists = ElementsByTagName("li");
var p = ElementsByTagName("p");
ElementById('rank').ownerDocument); //返回整个 Document ⽂档对象
alert(lists[0].ownerDocument); //返回整个 Document ⽂档对象
alert(p[0].ownerDocument); //返回整个 Document ⽂档对象
alert(p[0].ownerDocument.firstChild); //返回 DocumentType 对象，也就是⽂档声明 ……………>
作为⽗节点拥有的属性
childNodes
该属性返回⼀个 NodeList 对象。
NodeList 对象是⼀种类数组对象，保存着⼀组有序的节点，可以通过⽅括号语法和 item() ⽅法访问 NodeList 对象中的项。
1. 第⼀名：张⽔⽔
2. 第⼆名：黄糊糊
3. 第三名：安莘婉
var rank = ElementById("rank"); //获取 ol 元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。