HTML DOM对象的属性和方法

HTML DOM对象的属性和方法

HTML DOM 对象有几种类型：

1.Document 类型

在浏览器中，Document 对象表示整个 HTML 文档。

1.1属性

引用文档的子节点

documentElement

var html = document.documentElement;    //取得对<html>元素的引用

body

var body = document.body;    //取得对<body>元素的引用

获取文档信息

title

通过 title 属性可以访问当前文档的标题，也可以修改当前文档的标题。

var originalTitle = document.title;    //返回当前文档的标题

document.title = "New title";    //修改当前文档的标题

URL

该属性返回当前页面完整的 URL，也就是浏览器地址栏中的全部地址信息。

比如我打开了一个页面，浏览器地址栏中的信息显示如下：

http://www.cnblogs.com/cqhaibin/p/6291640.html

这些信息就是当前文档完整的 URL。

var url = document.URL;    //返回当前文档完整的URL

domain

该属性返回当前文档的服务器域名。

还是上面的地址，域名就是 www.cnblogs.com。

var domain = document.domain;    //返回当前文档的域名

referrer

该属性包含着链接到当前文档的源页面的 URL。

比如 A 页面上有个超链接，超链接指向 B 页面，我们在 A 页面点击了这个超链接，于是打开了 B 页面，此时，B 页面的 referrer 属性值就是 A 页面的完整 URL。但 A 页面并不是通过点击其他超链接打开的，所以 A 页面的 referrer 属性值是空字符串 ""。

var referrer = document.referrer;    //返回链接到当前页面的源页面的URL

lastModified

var lastModified = document.lastModified;    //返回当前文档最后被修改的日期和时间

还是以 http://www.cnblogs.com/cqhaibin/p/6291640.html 这个页面为例，在控制台输入以下代码：

document.lastModified;    //输入这行代码

"01/17/2017 11:58:34"    //返回的信息

cookie

这个属性可以访问和设置与当前文档相关的所有 cookie。

var cookie = document.cookie;    //返回与当前文档相关的所有cookie

1.2 方法

查找元素

getElementById()

该方法接受一个参数，即希望获取的元素的 ID 名称。找到相应的元素后会返回该元素。（通过ID查找元素，只会返回一个匹配的元素）。

<p id="p">some text</p>

var p = document.getElementById("p");    //取得对 p 元素的引用

getElementsByTagName()

该方法接受一个参数，即希望获取的元素的标签名。（通过标签名称查找元素，返回一个匹配的元素数组）。

返回的是一个 HTMLCollection 对象，这个对象包含了带有指定标签名的所有元素。该对象有 length 属性。

要访问 HTMLCollection 对象中的某项，可以用方括号语法或 item() 方法或 namedItem() 方法。

可以向方括号内传入数字或者字符串。在后台，对数字索引调用 item() 方法，对字符串索引调用 namedItem() 方法。

namedItem() 方法，接受一个参数，即元素的 name 特性值。返回带有给定 name 特性的元素。如果有多个元素 name 特性值相同，只返回第一个元素。

<img src="FuckJavaScript.gif" name="fc" />

<img scr="ComeOn.gif" />

<img src="OnMyGod.gif" />

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>Javascript</li>

</ul>

var images = document.getElementsByTagName('img');    //取得对所有<img>元素的引用

//访问某项

alert(images.length);             //"3"

alert(images[0]);                 //返回第一个<img>元素

alert(images["fc"]);              //返回第一个<img>元素

alert(images.item(0));            //返回第一个<img>元素

alert(images.namedItem("fc"));    //返回第一个<img>元素

getElementsByName()

这个方法接受一个参数，即 name 属性的值，返回带有给定 name 属性值的所有元素。常用此方法取得单选按钮。

这个方法也会返回一个 HTMLCollection 对象。（通过name属性查找元素，返回一个匹配的元素数组）

<fieldset>

    <legend>你喜欢下列哪个品牌的手机</legend>

    <label><input type="radio" value="Apple" name="phone" />苹果</label>

    <label><input type="radio" value="Huawei" name="phone" />华为</label>

    <label><input type="radio" value="OPPO" name="phone" />OPPO</label>

    <label><input type="radio" value="Xiaomi" name="phone" />小米</label>

    <label><input type="radio" value="Meizu" name="phone" />魅族</label>

</fieldset>

var brands = document.getElementsByName('phone');    //返回一个列表，包含所有 radio 元素

alert(brands[1].value);         //返回列表中第二个 radio 元素的 value 属性的值

alert(brands.item(1).value);    //返回列表中第二个 radio 元素的 value 属性的值

getElementsByClassName()

HTML 5 定义了该方法。（通过class查找元素，返回一个匹配的元素数组）

这个方法接受一个参数，即 class 特性值，返回带有给定 class 特性的所有元素。

<p class="jereh">杰瑞集团1</p>

<p class="jereh">杰瑞集团2</p>

var result = document.getElementsByClassName("jredu");　　　//返回一个数组，包含所有 class为jereh的元素

alert(result[0].innerHTML);　　　　　　　　　　　　　　　　　　　//返回第一个数组中的文本

2.Node 类型

2.1 属性

基础属性

nodeType

该属性表示元素的节点类型，返回一个数字。

不同类型节点的 nodeType 值不一样。

类型	数值	说明	备注
ELEMENT_NODE	1	元素节点	常用
ATTRIBUTE_NODE	2	属性节点	常用
TEXT_NODE	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	文档片段节点
NOTATION_NODE	12	DTD声明节点

nodeName

该属性返回节点的名称，是元素的标签名。

返回的标签名是大写字母。

<ol id="rank">

    <li>第一名：张水水</li>

    <li>第二名：黄糊糊</li>

    <li>第三名：安莘婉</li>

</ol>

alert(document.getElementById('rank').nodeName);    //"OL"

nodeValue

该属性返回节点的值，值取决于节点的类型。

ownerDocument

该属性返回整个文档对象。

在对返回来的对象进行第一个子节点检测时，返回的是文档声明：<!DOCTYPE ………………………………>。

<ol id="rank">

    <li>第一名：张水水</li>

    <li>第二名：黄糊糊</li>

    <li>第三名：安莘婉</li>

</ol>

<p>some text</p>

var lists = document.getElementsByTagName("li");

var p = document.getElementsByTagName("p"); 

alert(document.getElementById('rank').ownerDocument);    //返回整个 Document 文档对象

alert(lists[0].ownerDocument);    //返回整个 Document 文档对象

alert(p[0].ownerDocument);        //返回整个 Document 文档对象

alert(p[0].ownerDocument.firstChild);    //返回 DocumentType 对象，也就是文档声明 <!DOCTYPE ………………>

作为父节点拥有的属性

childNodes

（通过父元素去查找所有的子元素有bug不允许父元素和子元素换行）

该属性返回一个 NodeList 对象。

NodeList 对象是一种类数组对象，保存着一组有序的节点，可以通过方括号语法和 item() 方法访问 NodeList 对象中的项。

<ol id="rank">

    <li>第一名：张水水</li>

    <li>第二名：黄糊糊</li>

    <li>第三名：安莘婉</li>

</ol>

var rank = document.getElementById("rank");    //获取 ol 元素

alert(rank.childNodes.length);    //"7",返回 ol 元素的子节点个数

有的浏览器会把元素之间的空白处算作一个文本节点。

本例中 ol 元素后面的空白处（1个）和 li 元素后面的空白处（3个），算作文本节点，于是这4个空白文本节点加上3个 li 元素节点，一共是7个，所以 rank.childNodes.length 返回7。

但是，如果把上例中所有元素紧密相接，互相之间不留空白，则 length 值会不一样。

//元素之间不留空白

<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第一名：安莘婉</li></ol>

var rank = document.getElementById("rank");    //取得对 ol 元素的引用

alert(rank.childNodes.length);    //f返回 "3"

firstChild

该属性返回父节点的第一个子节点。（通过父元素去查找第一个子元素,这种写法有bug，不允许父元素和子元素换行）。

（firstElementChild：通过父元素去查找第一个子元素,允许元素换行）。

<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");    //取得对 ol 元素的引用

alert(rank.firstChild);       //返回第一个 li 元素

alert(rank.childNodes[0]);    //返回第一个 li 元素

someNode.firstChild = someNode.childNodes[0]

上例中返回的是第一个 li 元素，即 <li>第一名：张水水</li>，要获得第一个 li 元素的文本内容：第一名：张水水，可以用下面的方法。

<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");          //取得对 ol 元素的引用
alert(rank.firstChild.innerHTML);　　　　　　　　　　   //"第一名：张水水"
alert(rank.firstChild.firstChild.nodeValue);        //"第一名：张水水"
alert(rank.childNodes[0].firstChild.nodeValue);    //"第一名：张水水"

lastChild

该属性返回父节点的最后一个子节点。

<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");        //取得对 ol 元素的引用

alert(rank.lastChild);                                 //返回最后一个 li 元素

alert(rank.childNodes[rank.childNodes.length - 1]);    //返回最后一个 li 元素

alert(rank.lastChild.innerHTML);                                　　 　　　　　　 //"第三名：安莘婉"
alert(rank.lastChild.firstChild.nodeValue);　　　　　　　　　　　　　　　　　　　　   //"第三名：安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].firstChild.nodeValue);　　    //"第三名：安莘婉"

someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]

作为子节点有用的属性

parentNode

该属性返回子节点的父节点。

<p>快过年了，说点什么好呢？</p>

<ul>

    <li>新年快乐</li>

    <li>万事如意</li>

    <li id="djb">最后祝你新年大吉吧</li>

</ul>

var djb = document.getElementById("djb");    //获得对 id="djb" 的 li 元素的引用

alert(djb.parentNode.nodeName);              //"UL"

previousSibling

在 childNodes 列表中每个节点相互之间都是同胞节点。

该属性返回 childNodes 列表中该子节点的上一个同胞节点。（previousSibling这种写法有bug，不允许父元素和子元素换行）（previousElementSibling 这种写法元素可以换行）

<p>快过年了，说点什么好呢？</p>

<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年大吉吧</li></ul>

var ruyi = document.getElementById("ruyi");          //获得对 id="ruyi" 的 li 元素的引用

alert(ruyi.previousSibling.firstChild.nodeValue);    //"新年快乐"

nextSibling

该属性返回 childNodes 列表中该子节点的下一个同胞节点。（nextSibling这种写法有bug，不允许父元素和子元素换行）（nextElementSibling 这种写法元素可以换行）

<p>快过年了，说点什么好呢？</p>

<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年大吉吧</li></ul>

var ruyi = document.getElementById("ruyi");    //获得对 id="ruyi" 的 li 元素的引用

alert(ruyi.nextSibling.firstChild.nodeValue);    //"最后祝你新年大吉吧"

2.2 方法

hasChildNodes()

如果指定的节点有子节点，该方法返回 true，若没有子节点，则返回 false。

<input id="btn" type="button" value="Button" />

<ul id="words">

    <li>新年快乐</li>

    <li id="ruyi">万事如意</li>

    <li>最后祝你新年大吉吧</li>

</ul>

var btn = document.getElementById("btn");    //获得对 id="btn" 的引用

var words = document.getElementById("words");    //获得对 id="words" 的 ul 元素的引用 

alert(btn.hasChildNodes());    //"false"

alert(words.hasChildNodes());    //"true"

appendChild()

该方法向 NodeList 列表中的末尾添加一个节点。

接收一个参数，即要添加的节点。

该方法返回新添加的节点。

//代码

<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>

//页面显示

    新年快乐

    万事如意

    最后祝你新年大吉吧

var words = document.getElementById("words");    //获得对 id="words" 的 ul 元素的引用

var addLi = document.createElement("li");    //创建 li 元素

var liText = document.createTextNode("我是新增项，被放在元列表的末尾处");    //创建 li 元素的文本内容

addLi.append(liText);    //给 li 元素添加文本内容

words.appendChild(addLi);    //给 ul 元素添加新建的 li 元素

//刷新页面

    新年快乐

    万事如意

    最后祝你新年大吉吧

    我是新增项，被放在元列表的末尾处

insertBefore()

该方法向 NodeList 列表中指定位置之前插入节点，不局限于最后一位。

接收两个参数，第一个是要插入的节点，第二个是指定位置的节点。如果第二个参数未指定，则会在列表末尾插入新节点。

该方法返回新插入的节点。

//代码

<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>

//页面显示

    新年快乐

    万事如意

    最后祝你新年大吉吧

var words = document.getElementById("words");    //获得对 id="words" 的 ul 元素的引用

var addLi = document.createElement("li");    //创建 li 元素

var liText = document.createTextNode("我是新增项，被插在了列表的第二位置处");    //创建 li 元素的内容

addLi.append(liText);    //给 li 元素添加文本内容

words.insertBefore(addLi, words.childNodes[1]);    //把新建 li 元素插入到列表的第二个位置处

//刷新页面

    新年快乐

    我是新增项，被插在了列表的第二位置处

    万事如意

    最后祝你新年大吉吧

replaceChild()

该方法用一个新节点替换 NodeList 列表中的某个节点。

接收两个参数，第一个是要插入的节点（这个节点可以是文档中某个已存在的节点，或者是创建的新节点），第二个是要替换的节点。

该方法返回被替换的节点。

//代码

<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>

//页面显示

    新年快乐

    万事如意

    最后祝你新年大吉吧

var words = document.getElementById("words");    //获得对 id="words" 的 ul 元素的引用

var addLi = document.createElement("li");    //创建 li 元素

var liText = document.createTextNode("我是新增项，替换了原列表的第项");    //创建 li 元素的文本内容

addLi.append(liText);    //给 li 元素添加文本内容

words.replaceChild(addLi, words.childNodes[1]);    //用新建 li 元素替换了原列表中第二项

//刷新页面

    新年快乐

    我是新增项，替换了原列表的第二项

    最后祝你新年大吉吧

removeChild()

该方法移除 NodeList 列表中的某个节点。

接收一个参数，即要移除的节点。

返回移除的节点。

//代码

<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>

//页面显示

    新年快乐

    万事如意

    最后祝你新年大吉吧

var words = document.getElementById("words");    //获得对 id="words" 的 ul 元素的引用

words.removeChild(words.firstChild);    //移除原列表的第一项

//刷新页面

    万事如意

    最后祝你新年大吉吧

所有节点都有的方法

cloneNode()

该方法可以创建一个完全相同的副本。

接收一个布尔值参数，表示是否执行深复制。true 进行深复制；false 进行浅复制。

深复制，复制节点及其整个子节点树；浅复制，只复制节点本身。

返回被复制的节点。

normalize()

该方法删除空的文本节点；把相邻的文本节点合并为一个文本节点。

3.Element 类型

Element 类型用于表示 HTML 元素，提供了对元素标签名，子节点和属性的访问。

3.1 属性

设置或返回元素的元素的 id 属性值。

title

设置或返回元素的元素的 title 内容。

lang

设置或返回元素的元素内容的语言代码，很少使用

dir

设置或返回元素的语言的方向，ltr，左到右；rt，右到左。很少使用

className

设置或返回元素的 class 属性的值。

tagName

返回元素的标签名。

在 HTML 中，tagName 属性的返回值始终是大写的。

<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>

var p = document.getElementById('myP');

alert(p.id);           //"myP"

alert(p.className);    //"para"

alert(p.title);        //"text"

alert(p.lang);         //"en"

alert(p.dir);          //"ltr"

alert(p.tagName);      //"P" 大写

innerHTML

返回元素的文本。

<h1>青岛理工大学</h1>

 var h1 = document.getElementsByTagName("h1");

 console.log(h1[].innerHTML);　　　　　　　　　　//返回文本“青岛理工大学”。

3.2 方法

document.createElement()

创建新元素。

接收一个参数，即要创建元素的标签名。

返回新创建的元素。

//页面空空

//写代码

var p = document.createElement("p");    //创建 p 元素

var pText = document.createTextNode("Some text");    //创建文本节点

p.appendChild(pText);    //给 p 元素添加文本节点

document.body.appendChild(p);    //给 body 元素添加 p 元素

//刷新页面

Some text

getAttribute()

该方法取得元素的属性。

接收一个参数，即需要获得属性值的属性名称。属性名称要用引号括起来。

返回指定属性的值。如果指定属性不存在，则返回 null。

<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>

var p =document.getElementById("myP");

alert(p.getAttribute("id"));    //"myP"

alert(p.getAttribute("class"));    //"para"

alert(p.getAttribute("title"));    //"text"

alert(p.getAttribute("lang"));    //"en"

alert(p.getAttribute("dir"));    //"ltr"

setAttribute()

该方法添加指定的属性，并为其赋指定的值。

接收两个参数，第一个参数为要添加的属性的名称，第二个参数为要添加的属性值。属性名称和属性值都要用引号括起来。

无返回值。

<p id="myP">Some Text</p>

var p =document.getElementById("myP");

alert(p.getAttribute("class"));    //"null"

p.setAttribute("class", "para");    //设置 class  属性并赋值 "para"

alert(p.getAttribute("class"));    //"para"

removeAttribute()

该方法删除指定的属性。

接收一个参数，希望删除指定属性的名称。属性名称要用引号括起来。

无返回值。

<p id="myP" class="para">Some Text</p>

var p =document.getElementById("myP");

alert(p.getAttribute("class"));    //"para"

p.removeAttribute("class");    //移除 class  属性

alert(p.getAttribute("class"));    //"null"

4. Text 类型

方法

document.createTextNode()

该方法创建文本节点。

接收一个参数，即要插入的文本内容。

返回创建的文本节点。

<p id="myP"></p>

//页面空空

//JS代码

var p =document.getElementById("myP");    //创建 P 元素

var pText = document.createTextNode("Some text");    //创建文本节点

p.appendChild(pText);    //给 p 元素添加文本节点

document.body.appendChild(p);    //给 body 元素添加 p 元素

//刷新页面

Some text

normalize()

如果父节点包含两个或多个文本节点，父节点在调用了该方法后，会把所有文本节点合并为一个文本节点。

无参数。

splitText()

该方法会把一个文本节点分成两个文本节点。

接收一个参数，参数为数字，为指定分割的位置值。

原来的文本节点将包括为从开始到分割位置之前的内容。

该方法返回一个新文本节点，包括从分割位置开始（包含分割位置的文本）到结束的内容。

5.Attribute 类型

Attributes 属性包含一个 NamedNodeMap 对象，与 NodeList 类似，是一个动态集合。

一个元素的所有属性节点都在这个集合中。

NamedNodeMap 对象有 length 属性，即一个元素所有属性的个数。

5.1 属性

name

该属性返回指定属性的名称。

value

该属性返回指定属性的值。

specified

该属性值是布尔值。

如果在文档中设置了属性值，则返回 true，如果是 DTD/Schema 中的默认值，则返回 false。

length

返回属性列表中属性节点的个数。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

console.log(p.attributes.length);    //3

console.log(p.attributes[1]);    //返回属性列表中第二个属性对象

console.log(p.attributes[1].name);    //"class"

console.log(p.attributes[1].value);    //"para"

console.log(p.attributes["class"]);    //返回属性列表中第二个属性对象

console.log(p.attributes["class"].name);    //"class" 返回属性列表中第二个属性对象的名称

console.log(p.attributes["class"].value);    //"para"

console.log(p.attributes[1].specified);    //"true"

5.2 方法

getNamedItem()

接收一个参数，即想要返回的属性节点的属性名称。

返回指定属性名称的属性节点。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

console.log(p.attributes.getNamedItem("class"));    //返回属性列表中 class 属性节点

console.log(p.attributes.getNamedItem("class").name);    //"class"

console.log(p.attributes.getNamedItem("class").value);    //"para"

//再来回顾前两种访问属性节点列表中某个属性节点的方法

//方括号里面跟索引号

console.log(p.attributes[1]);    //返回属性列表中第二个属性节点

console.log(p.attributes[1].name);    //"class"

console.log(p.attributes[1].value);    //"para"

//方括号里面跟属性名称

console.log(p.attributes["class"]);    //返回属性列表中 class 属性节点

console.log(p.attributes["class"].name);    //"class"

console.log(p.attributes["class"].value);    //"para"

removeNamedItem()

接收一个参数，即想要删除的属性节点的属性名称。

返回删除的指定属性名称的属性节点。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

alert(p.attributes["title"]);    //返回属性 title 节点

p.attributes.removeNamedItem("title");    //移除 title 属性节点

alert(p.attributes["title"]);    //"undifined"

setNamedItem()

该方法向 NamedNodeMap 列表中添加或替换指定的属性节点。

接收一个参数，即要添加的向 NamedNodeMap 列表中添加或替换指定的属性节点。

如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null。

//p 元素有2个属性节点

<p id="myP" class="para">Some Text</p>

var p =document.getElementById("myP");

alert(p.attributes.length);    //"2"

var attrT = document.createAttribute("title");    //创建属性节点 title

attrT.value = "text";    //给 title 节点赋值

p.attributes.setNamedItem(attrT);    //给 p 元素的属性列表中添加 title 属性节点

//检测添加的属性节点

alert(p.attributes.length);    //"3"

alert(p.attributes["title"].value);    //"text"

一般开发人员用的最多的是 getAttribute()，setAttribute()，removeAttribute() 这些方法。

item()

接收一个参数，即想要访问的属性节点的索引数值。

返回位于指定索引的属性节点。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

console.log(p.attributes.item(1));    //返回属性列表中第二个属性节点

console.log(p.attributes.item(1).name);    //"class"

console.log(p.attributes.item(1).value);    //"para"

//再来回顾前三种访问属性节点列表中某个属性节点的方法

//方括号里面跟索引号

console.log(p.attributes[1]);    //返回属性列表中第二个属性节点

console.log(p.attributes[1].name);    //"class"

console.log(p.attributes[1].value);    //"para"

//方括号里面跟属性名称

console.log(p.attributes["class"]);    //返回属性列表中 class 属性节点

console.log(p.attributes["class"].name);    //"class"

console.log(p.attributes["class"].value);    //"para"

//geyNamedItem()里跟属性名称

console.log(p.attributes.getNamedItem("class"));    //返回属性列表中 class 属性节点

console.log(p.attributes.getNamedItem("class").name);    //"class"

console.log(p.attributes.getNamedItem("class").value);    //"para"

总结：

按数字索引访问某项：element.attributes[number]，element.attributes.item(number)。

按字符串索引访问某项：element.attributes[string]，element.attributes.getNamedItem(string)。

HTML DOM对象的属性和方法的更多相关文章

HTML DOM对象的属性和方法介绍(原生JS方法)
HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...
HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
Event 对象的属性和方法
事件触发时,会将一个 Event 对象传递给事件处理程序,比如: document.getElementById("testText").addEventListener(&quo ...
Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
location对象的属性和方法应用(解析URL)
本文将与大家分享下location对象使用属性和方法来解析URL的实例,感兴趣的朋友可以参考下,希望对你有所帮助 location对象提供了很多属性和方法用来解析URL. 复制代码代码如下: &l ...
Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
javascript面向对象（给对象添加属性和方法的方式）
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...

随机推荐

网站开发进阶(三十)HTML5--本地存储Web Storage
HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...
unity实现玻璃效果
一.使用Cubemap,做一个假反射 shader代码如下: Shader "Custom/glassShader" { Properties { _MainColor(" ...
Linux Platform Device and Driver
从 Linux 2.6 起引入了一套新的驱动管理和注册机制 :Platform_device 和 Platform_driver . Linux 中大部分的设备驱动,都可以使用这套机制 , 设备用 P ...
FPGA学习笔记（一）Verilog语法基础
一.变量类型 ①数值数值表示采用 <二进制位数>'<数值表示的进制><数值>的结构. 其中进制可以为b.o.d.h分别代表二.八.十.十六进制. 例如22'd0代 ...
schema workbench的操作
1.schema workbench连不上sql,如下: 看不懂,这是驱动的问题,你只要使用最新的驱动,mysql-connector-java-5.1.13-bin.jar 将对应驱动放入schem ...
利用PreLoader实现一个平视显示（HUD）效果（可以运用到加载等待效果），并进行简单的讲解
什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...
linux下32位汇编调用规则
传递给系统调用的参数必须安装参数顺序一次放到寄存器中,当系统调用完成后,返回值放在eax中: 当系统调用参数<=5个时: eax中存放系统调用的功能号,传递给系统调用的参数顺序依次放到寄存器:e ...
初识MySQL数据库的各种CMD命令窗口下的指令
今天我们就来看一下数据库的各种命令,以下命令全部是从CMD命令窗口下的命令行输入指令,首先如果如果输入mysql,系统提示"mysql不是内部命令或外部命令.那么这其实是环境变量没有设置好的 ...
javascript、ruby和C性能一瞥(1)
测试一下本地js.浏览器中的js以及ruby对于类似算法的性能.结果有些意外:浏览器js最快,本地其次当相差很小:ruby最慢而且不是一个数量级的: 因为写的匆忙,可能有重大问题没能看出来,请各位高人 ...
熊猫猪新系统测试之三：iOS 8.0.2
本来本猫要等到8.1版本出来后再做测试的,结果等来等去就是迟迟不推送更新呀!说好10月20号的iOS 8.1呢?为了一鼓作气写完,就先不等了.先拿手头的iOS 8.0.2系统做一下测试吧! 8.x系统 ...

HTML DOM对象的属性和方法

innerHTML

HTML DOM对象的属性和方法的更多相关文章

随机推荐

热门专题