DOM节点的属性和方法

时间：2022-11-01 08:26:02

HTML DOM Element 对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点（参见下一节）。

google IE firefox safari opera
true true true true true

属性和方法

1. accessKey

设置或返回元素的快捷键

快捷键规定激活元素或使元素获得焦点的快捷键。

注释：在不同的浏览器中访问快捷键的方式各有不同：

DOM节点的属性和方法

不过在大多数浏览器中，可以将快捷键设置为其他组合。

提示：如果超过一个元素拥有相同的快捷键，那么：

  • IE, Firefox: 激活下一个被按下快捷键的元素
  • Chrome, Safari:激活最后一个被按下快捷键的元素
  • Opera: 激活第一个被按下快捷键的元素

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.accessKey=accessKey

<html>
<head>
<script>
function accesskey()
 {
 document.getElementById('w3s').accessKey="w"
 }
</script>
</head>

<body onload="accesskey()">

<a id="w3s" href="http://www.w3school.com.cn/">W3School</a>

</body>
</html>

2. appendChild()

向节点添加最后一个子节点

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.appendChild(node)

参数

  • 必需
    • node 您希望添加的节点对象。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var text = document.createTextNode("1213"); //Document中的对象实例 createTextNode
 Dom_p.appendChild(text);
 div.appendChild(Dom_p);
 }
</script>
</html>

3. attributes

返回指定节点的属性集合，即 NamedNodeMap

提示：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。

浏览器支持

google IE firefox safari opera
true true true true true

注释：在 Internet Explorer 8 以及更早的版本中，attributes 属性会返回元素所有可能属性的集合。

用法

node.attributes

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var attr = div.attributes;
var text = "";
for(let i = 0; i< attr.length;i++){
 text += attr[i].nodeValue + " ";
 }
 Dom_p.innerText += text;
 div.appendChild(Dom_p);
 }
</script>
</html>

4. childNodes

返回节点的子节点集合，以 NodeList 对象

提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.childNodes

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
 console.log(document.body.childNodes);
 }
</script>
</html>

5. className

设置或返回元素的 class 属性

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.className=classname

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
 div.className = "ddd"
 }
</script>
</html>

6. clientHeight

返回元素的可见高度

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.clientHeight

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
 alert(div.clientHeight);
 }
</script>
</html>

7. clientWidth

返回元素的可见高度

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.clientWidth

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
 alert(div.clientWidth);
 }
</script>
</html>

8. cloneNode()

创建节点的拷贝，并返回该副本

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代的属性，请把 deep 参数设置 true，否则设置为 false。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.cloneNode(deep)

参数

  • 可选
    • deep 默认是 false。
      • 设置为 true，如果您需要克隆节点及其属性，以及后代
      • 设置为 false，如果您只需要克隆节点及其后代
        返回值
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var cloneDiv = div.cloneNode();
 div.appendChild(cloneDiv)
 }
</script>
</html>

9. compareDocumentPosition()

比较两个节点，并返回描述它们在文档中位置的整数

返回值

  • 1：没有关系，两个节点不属于同一个文档。
  • 2：第一节点（P1）位于第二个节点后（P2）。
  • 4：第一节点（P1）定位在第二节点（P2）前。
  • 8：第一节点（P1）位于第二节点内（P2）。
  • 16：第二节点（P2）位于第一节点内（P1）。
  • 32：没有关系，或是两个节点是同一元素的两个属性。

注释：返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

node.compareDocumentPosition(node)

参数

  • 必需
    • node 规定于当前节点作比较的节点
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.compareDocumentPosition(btn));
 }
</script>
</html>

10. contentEditable

设置或返回元素内容是否可编辑

提示：您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.contentEditable

HTMLElementObject.contentEditable=true|false

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.contentEditable = true;
 }
</script>
</html>

11. dir

设置或返回元素的文本方向

提示：Element需要设置dir属性。

dir的属性值

  • auto 自动
  • rtl 右
  • ltl 左

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.dir=text-direction

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir=""></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.dir);
 }
</script>
</html>

12. firstChild

返回指定节点的首个子节点，以 Node 对象

注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.firstChild

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
if(div.firstChild.nodeType == 3){
 console.log(div.childNodes[1]);
 }else{
 console.log(div.firstChild);
 }
 }
</script>
</html>

13. getAttribute()

返回指定属性名的属性值

提示：如果您希望以 Attr 对象返回属性，请使用 getAttributeNode。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.getAttribute(attributename)

参数

  • 必需
    • attributename 需要获得属性值的属性名称。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.getAttribute('id'));
 }
</script>
</html>

14. getAttributeNode()

返回指定属性名的属性值，以 Attr 对象

提示：如果您只需要返回属性值，请使用 getAttribute。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.getAttributeNode(attributename)

参数

  • 必需
    • attributename 需要返回的属性的名称。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.getAttributeNode('div').nodeValue);
 }
</script>
</html>

15. getElementsByTagName()

返回具有指定标签名的元素子元素集合，以 NodeList 对象

提示：参数值 “*” 返回元素的所有子元素。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.getElementsByTagName(tagname)

参数

  • 必需
    • tagname 需要获得的子元素的标签名。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(document.body.getElementsByTagName('p'));
 }
</script>
</html>

16. hasAttribute()

如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

element.hasAttribute(attributename)

参数

  • 必需
    • attributename 需要检查是否存在的属性名称。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.hasAttribute('div'));
 }
</script>
</html>

17. hasAttributes()

如果指定节点拥有属性，则 hasAttributes() 方法返回 true，否则返回 false

如果指定节点不是元素节点，则返回值始终是 false。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

element.hasAttributes()

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.hasAttributes());
 }
</script>
</html>

18. hasChildNodes()

如果指定节点拥有子节点，返回 true，否则返回 false

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.hasChildNodes()

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.hasChildNodes());
 }
</script>
</html>

19. id

设置或返回元素的 id

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.id=id

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.id = "div";
 }
</script>
</html>

20. innerHTML

设置或返回元素的 inner HTML

提示：可以解析字符串中的HTML标签。

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.innerHTML=text

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var htmlText = div.innerHTML;
 htmlText += "<strong>strong</strong><br/>".fontsize("18px");
 htmlText += "<strong>strong</strong>";
 div.innerHTML = htmlText;
 }
</script>
</html>

21. insertBefore()

在您指定的Element里已有的子节点之前插入新的子节点

提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。您也可以使用 insertBefore 方法插入/移动已有元素。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.insertBefore(newnode,existingnode)

参数

  • 必需
    • newnode 需要插入的节点对象。
  • 可选
    • existingnode 在其之前插入新节点的子节点。如果未规定，则 报错。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var text = document.createTextNode("dddddddd");
 div.insertBefore(text,div.childNodes[0])
 }
</script>
</html>

22. isContentEditable

isContentEditable 属性返回元素的内容是否可编辑，该属性为只读

提示：请使用 contentEditable 属性来改变元素的可编辑状态。

浏览器支持

google IE firefox safari opera
11.0 5.5 3.0 3.2 10.6

用法

HTMLElementObject.isContentEditable

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var text = document.createTextNode("dddddddd");
 div.insertBefore(text,div.childNodes[0])
 }
</script>
</html>

23. isDefaultNamespace()

如果指定的命名空间是默认的， 方法返回 true，否则返回 false

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

node.isDefaultNamespace(namespaceURI)

参数

  • 必需
    • namespace 需要检查的命名空间的 URI。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 alert(div.isDefaultNamespace('http://www.w3.org/1999/xhtml'));
 }
</script>
</html>

24. isEqualNode()

检查两个节点是否相等

如果下例条件为 true，则两个节点相等：

  • 节点类型相同
  • 拥有相同的 nodeName、NodeValue、localName、nameSpaceURI 以及前缀
  • 所有后代均为相同的子节点
  • 拥有相同的属性和属性值（属性次序不必一致）

提示：请使用 isSameNode() 方法来检测两节点是否是相同节点。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

node.isEqualNode(node)

参数

  • 必需
    • node 希望与指定节点比较的节点。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div class="di" div="dd" dir="">
</div>
<div class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var divList = document.getElementsByTagName('div');

 alert(divList[0].isEqualNode(divList[1]));
 }
</script>
</html>

<html>
<head>
<title>zsh</title>
</head>
<body>
<div class="di" div="dd" dir="">
</div>
<span class="di" div="dd" dir="">
</span>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var divList = document.getElementsByTagName('div',"span");

 alert(divList[0].isEqualNode(divList[1]));
 }
</script>
</html>

25. isSameNode()

检查两节点是否是相同的节点,如果两节点是相同的节点，返回 true，否则返回 false

提示：请使用 isEqualNode() 方法来检测两节点是否是相同节点。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

注释：Firefox 版本 10 停止对此方法的支持，因为 DOM version 4 中已弃用该方法。作为替代，您应该使用 === 来比较两节点是否相同。

用法

node.isSameNode(node)

参数

  • 必需
    • node 希望与指定节点比较的节点。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div class="di" div="dd" dir="">
</div>
<span class="di" div="dd" dir="">
</span>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var divList = document.getElementsByTagName('div');

 alert(divList[0].isSameNode(divList[0]));
 }
</script>
</html>

26. lang

设置或返回元素的语言代码

提示

需要给元素设置lang属性，了解语言代码手册请戳我

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.lang=language-code

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.lang);
 div.lang = "zsh";
 console.log(div.lang);
 }
</script>
</html>

27. lastChild

返回指定节点的最后一个子节点，以 Node 对象

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.lastChild

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.lastChild);
 }
</script>
</html>

28. namespaceURI

返回指定节点的命名空间的 URI

提示：元素节点继承其父节点的命名空间，因此，XHTML 文档中的所有元素都拥有 namespaceURI “http://www.w3.org/1999/xhtml“。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

node.namespaceURI

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.namespaceURI);
 }
</script>
</html>

29. nextSibling

返回指定节点之后紧跟的节点，在相同的树层级中,被返回的节点以 Node 对象返回。

提示：如果没有 nextSibling 节点，则返回值为 null。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.namespaceURI

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh"><div></div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.childNodes[0].nextSibling);
 }
</script>
</html>

30. nodeName

指定节点的节点名称

如果节点是元素节点，则 nodeName 属性返回标签名。

如果节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.nodeName

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
<div></div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.nodeName.toLowerCase());
 console.log(div.childNodes[0].nodeName);
 }
</script>
</html>

31. nodeType

返回以数字值返回指定节点的节点类型

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

DOM节点的属性和方法

DOM节点的属性和方法

DOM节点的属性和方法

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.nodeType

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div></div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
if(div.childNodes[0].nodeType != 3){
 console.log(div.childNodes[0]);
 }else{
 console.log(div.childNodes[0].nodeValue);
 }
 }
</script>
</html>

32. nodeValue

设置或返回指定节点的节点值

提示：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。

提示：nodeValue 属性的替代选择是 textContent 属性。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.nodeValue=value || node.nodeValue

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div>1223sssa23sss</div>456
<div>sa1d23a</div>789
<div>I`M Good Boy</div>000
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var domDiv = div.childNodes;
 console.log(domDiv);
var text = "";
for(let i=0;i<domDiv.length;i++){
let divI = domDiv[i];
if(divI.nodeType == 3){
 console.log(divI.nodeValue);
if(divI.nodeValue){
 text += divI.nodeValue.trim()+":";
 }
 }
 }
 console.log(text.slice(0,text.length - 1));
 }
</script>
</html>

33. normalize()

移除空的文本节点，并连接相邻的文本节点

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.normalize()

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮添加文本，点击另一个按钮来正规化元素。</p>

<button onclick="addTextNode()">添加文本节点</button>

<button onclick="normPara()">对段落进行正规化</button>

<script>
function addTextNode()
 {
var y=document.createTextNode("请再次点击。");
var x=document.getElementById("demo");
 x.appendChild(y);
var z=document.getElementById("cc");
 z.innerHTML=x.childNodes.length;
 }

function normPara()
 {
var x=document.getElementById("demo");
 x.normalize();
var z=document.getElementById("cc");
 z.innerHTML=x.childNodes.length;
 }
</script>

<p>上面的段落有 <span id="cc">1</span> 个子节点。</p>

</body>
</html>

34. offsetHeight

返回元素的高度

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.offsetHeight

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.offsetHeight);
 }
</script>
</html>

35. offsetWidth

返回元素的宽度

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.offsetWidth

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.offsetWidth);
 }
</script>
</html>

36. offsetLeft

返回元素的水平偏移位置

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.offsetLeft

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.offsetLeft);
 }
</script>
</html>

37. offsetParent

返回元素的偏移容器

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.offsetParent

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.offsetParent);
 }
</script>
</html>

38. offsetTop

返回元素的垂直偏移位置

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.offsetTop

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.offsetTop);
 }
</script>
</html>

39. ownerDocument

以 Document 对象的形式返回节点的 owner document

在 HTML 中，HTML 文档本身始终是元素的 ownerDocument。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.ownerDocument

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.ownerDocument);
 }
</script>
</html>

40. parentNode

以 Node 对象的形式返回指定节点的父节点

如果指定节点没有父节点，则返回 null。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.parentNode

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.parentNode);
 }
</script>
</html>

41. previousSibling

返回同一树层级中指定节点的前一个节点,被返回的节点以 Node 对象的形式返回

提示：如果没有 previousSibling 节点，则返回值是 null。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.previousSibling

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.previousSibling);
 }
</script>
</html>

42. removeAttribute()

删除指定的属性

此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.removeAttribute(attributename)

参数

  • 必需
    • attributename 您希望移除的属性的名称。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.removeAttributeN('div');
 }
</script>
</html>

43. removeAttributeNode()

删除指定的属性，并以 Attr Node 对象返回被删除的属性

此方法与 removeAttribute() 方法的差异是，removeAttribute() 方法返回具有指定名称的属性，而此方法删除指定的 Attr 对象。结果是相同的。同时，removeAttribute() 方法没有返回值，而此方法返回被删除的属性，以 Attr 对象的形式。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.removeAttributeNode(attributenode)

参数

  • 必需
    • attributenode 您希望移除的属性节点。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.removeAttributeNode(div.getAttributeNode('div')));
 }
</script>
</html>

44. removeChild()

删除元素的某个指定的子节点，以 Node 对象返回被删除的节点，如果节点不存在则返回 null

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.removeChild(node)

参数

  • 必需
    • node 您希望删除的节点对象。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.removeChild(div.childNodes[0]));
 }
</script>
</html>

45. replaceChild()

用新节点替换某个子节点

这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

浏览器支持

google IE firefox safari opera
true true true true true

用法

node.replaceChild(newnode,oldnode)

参数

  • 必需
    • newnode 您希望插入的节点对象。
    • oldnode 您希望删除的节点对象。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var text = document.createTextNode("456");
 console.log(div.replaceChild(text,div.childNodes[0]));
 }
</script>
</html>

46. scrollHeight

返回元素的整体高度

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.scrollHeight

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.scrollHeight);
 }
</script>
</html>

47. scrollLeft

返回元素左边缘与视图之间的距离

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.scrollLeft

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.scrollLeft);
 }
</script>
</html>

48. scrollTop

返回元素上边缘与视图之间的距离

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.scrollTop

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.scrollTop);
 }
</script>
</html>

49. scrollWidth

返回元素的整体宽度

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.scrollWidth

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.scrollWidth);
 }
</script>
</html>

50. setAttribute()

添加指定的属性，并为其赋指定的值,如果这个指定的属性已存在，则仅设置/更改值。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

element.setAttribute(attributename,attributevalue)

参数

  • 必需
    • attributename 您希望添加的属性的名称。
    • attributevalue 您希望添加的属性值。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.setAttribute('attr','haha')
 }
</script>
</html>

51. setAttributeNode()

向元素中添加指定的属性节点,如果这个指定的属性已存在，则此方法会替换它。

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.setAttributeNode(attributenode)

参数

  • 必需
    • attributename 您希望添加的属性节点。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
var attr = document.createAttribute('attr');
 attr.nodeValue = "haha";
 div.setAttributeNode(attr)
 }
</script>
</html>

52. style

设置或返回元素的 style 属性

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.style.fontSize || element.style.fontSize = string

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.style.fontSize = "26px";
 console.log(div.style.fontSize);
 }
</script>
</html>

53. tabIndex

设置或返回元素的 tab 键控制次序

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.tabIndex=tabIndex

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.tabIndex);
 }
</script>
</html>

54. tagName

返回元素的标签名

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

浏览器支持

google IE firefox safari opera
true true true true true

用法

element.tagName

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.tagName);
 }
</script>
</html>

55. textContent

属性设置或返回指定节点的文本内容，以及它的所有后代

如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

提示：有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本。

浏览器支持

google IE firefox safari opera
true 9.0 true true true

用法

node.textContent=text || node.textContent

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div>456</div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.textContent);
 }
</script>
</html>

56. title

设置或返回元素的咨询标题

浏览器支持

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.title=title

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div>456</div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 div.title = 'div';
 console.log(div.title);
 }
</script>
</html>

57. item()

返回节点列表中位于指定索引的节点

浏览器支持

google IE firefox safari opera
true true true true true

用法

nodelist.item(index)

参数

  • 必需
    • index 被返回节点在节点列表中的索引。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div>456</div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.childNodes.item(0));
 }
</script>
</html>

58. length

返回集合中的节点数量，Node 对象的子节点集合是 NodeList 对象的实例。

浏览器支持

google IE firefox safari opera
true true true true true

用法

nodelist.length

<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="" lang="zh">123
<div>456</div>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
 console.log(div.childNodes.length);
 }
</script>
</html>

文档内容出自 W3cSchool和菜鸟教程，
如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/
标签：

相关文章