BOM，DOM

作者: puxiaotaoc | 来源:发表于2018-09-06 13:53 被阅读3次

一、window 对象
       Window 对象是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口；Window 对象表示一个浏览器窗口或一个框架，在客户端JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算，所以引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用，例如可以只写document，而不必写window.document；
       同样可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写Window.alert()；
       除了上面列出的属性和方法，Window 对象还实现了核心JavaScript所定义的所有全局属性和方法；
       Window 对象的 window 属性和self 属性引用的都是它自己，当需要明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性，除了这两个属性之外，parent属性、top属性及frame[]数组都引用了与当前Window 对象相关的其他Window 对象；

Window 对象集合

Window 对象集合
Window 对象属性

Window 对象属性
Window 对象方法

Window 对象方法

二、Navigator 对象
Navigator 对象包含有关浏览器的信息；Navigator 对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用的配置；

Navigator 对象集合

Navigator 对象集合
Navigator 对象属性

Navigator 对象属性
Navigator 对象方法

Navigator 对象方法

三、History 对象
History对象包含用户（在浏览器窗口中）访问过的URL，History对象是Window对象的一部分，可通过window.history属性对其进行访问；

四、Location 对象
Location 对象包含有关当前URL的信息，是Window对象的一部分，可通过window.location属性来访问；

五、Screen 对象
Screen 对象包含有关客户端显示屏幕的信息；每个Window对象的screen属性都引用一个Screen 对象，Screen 对象中存放着有关显示浏览器屏幕的信息，JavaScript程序将利用这些信息来优化它们的输出，以达到用户的显示要求，例如：一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用16位色还是使用8位色的图形，另外，JavaScript程序还能根据有关屏幕尺寸信息将新的浏览器窗口定位在屏幕中间；

六、Document 对象
       每个载入浏览器的HTML文档都会成为Document对象，Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问；Document对象是Window和frames对象的一个属性,是显示于窗口或框架内的一个文档，可通过window.document属性对其进行访问；
       在HTML DOM（文档对象模型）中，每个部分都是节点：
       1）文档本身是文档节点；
       2）所有HTML元素是元素节点；
       3）所有HTML属性是属性节点；
       4）HTML元素内的文本是文本节点；
       5）注释是注释节点；

七、HTML DOM Document 对象
每个载入浏览器的HTML文档都会成为Document对象，Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问；Document对象是Window对象的一部分，可通过window.document属性对其进行访问；

Document 对象集合

Document 对象集合
Document 对象属性

Document 对象属性
Document 对象方法

屏幕快照 2018-08-29 下午2.19.00.png

八、HTML DOM Element 对象
在HTML DOM中，Element对象表示HTML元素，Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点；NodeList对象表示节点列表，比如HTML元素的子节点集合；元素也可以拥有属性，属性是属性节点；

属性和方法

1）element.accessKey属性：设置或返回元素的快捷键，快捷键规定激活元素或使元素获得焦点的快捷键；

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

<body onload="accesskey()">

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

<p>accesskey 属性规定激活元素的快捷键。</p>
<p><b>注释：</b>快捷键在不同的浏览器中各有不同：</p>
<ul>
    <li>IE, Chrome, Safari, Opera 15+: [ALT] + <em>accesskey</em></li>
    <li>Opera prior version 15: [SHIFT] [ESC] + <em>accesskey</em></li>
    <li>Firefox: [ALT] [SHIFT] + <em>accesskey</em></li>
</ul>

</body>
</html>

运行结果

2）element.appendChild() 方法：向节点添加最后一个子节点；

// 将myList2的最后一个子节点添加到myList1中
<!DOCTYPE html>
<html>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>

</body>
</html>

点击按钮前

点击按钮后

3）element.attributes 属性：返回指定节点的属性集合，即 NamedNodeMap，可以使用 length 属性来确定属性的数量，然后遍历所有的属性节点并提取需要的信息；

<!DOCTYPE html>
<html>
<body>

<p>点击按钮来查看 button 元素拥有多少属性。</p>

<button id="myBtn" onclick="myFunction()">试一下</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myBtn").attributes.length;
    document.getElementById("demo").innerHTML = x;
}
</script>

<p>结果应该是 2（button 元素的 id 和 onclick 属性）。</p>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本中，attributes 属性将返回元素所有可能的属性的集合，在本例中，会返回大于 2 的数字。</p>


</body>
</html>

4）childNodes 属性：返回节点的子节点集合，即NodeList 对象，可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息；

<!DOCTYPE html>
<html>

<body>
  <p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>

  <button onclick="myFunction()">试一下</button>

  <script>
    function myFunction() {
      var txt = "";
      var c = document.body.childNodes;
      for (i = 0; i < c.length; i++) {
        txt = txt + c[i].nodeName + "<br>";
      };
      var x = document.getElementById("demo");
      x.innerHTML = txt;
      console.log(c)
    }
  </script>

  <p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>

</body>

</html>

运行结果

4）element.nodeName属性：指定节点的节点名称，如果节点是元素节点，则nodeName属性返回标签名，如果节点是属性节点，则nodeName属性返回属性的名称，对于其他节点类型，nodeName属性返回不同节点类型的不同名称；
5）element.className 属性：设置或返回元素的 class 属性；

<!DOCTYPE html>
<html>
<body id="myid" class="mystyle">

<script>
var x=document.getElementsByTagName('body')[0];
document.write("Body CSS 类：" + x.className);
document.write("<br>");
document.write("另一个替代方法：");
document.write(document.getElementById('myid').className);
</script>

</body>
</html>

运行结果

6）element.cloneNode方法：创建节点的拷贝，并返回该副本，cloneNode() 方法克隆所有属性以及它们的值；如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false；

<!DOCTYPE html>
<html>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p id="demo">请点击按钮把项目从一个列表复制到另一个列表中。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>

<p>请尝试把 <em>deep</em> 参数设置为 false，将仅仅克隆空的 LI 元素。</p>
</body>
</html>

运行结果

7）element.compareDocumentPosition() 方法：比较两个节点，并返回描述它们在文档中位置的整数，返回值可能是：
1：没有关系，两个节点不属于同一个文档。
2：第一节点（P1）位于第二个节点后（P2）。
4：第一节点（P1）定位在第二节点（P2）前。
8：第一节点（P1）位于第二节点内（P2）。
16：第二节点（P2）位于第一节点内（P1）。
32：没有关系，或是两个节点是同一元素的两个属性。

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

<!DOCTYPE html>
<html>
<body>

<p id="p1">This is a paragraph</p>
<p id="p2">This is another paragraph</p>

<p id="demo">请点击按钮来比较两个段落的位置。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var p1=document.getElementById("p1").lastChild;
var p2=document.getElementById("p2").lastChild;
var x=document.getElementById("demo");
x.innerHTML=p1.compareDocumentPosition(p2);
}
</script>

<p>
1: The two nodes do not belong to the same document.<br>
2: p1 is positioned after p2.<br>
4: p1 is positioned before p2.<br>
8: p1 is positioned inside p2.<br>
16: p2 is positioned inside p1.<br>
32: The two nodes has no relationship, or they are two attributes on the same element.
</p>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此方法。</p>

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

</body>
</html>

运行结果

8）element.contentEditable 属性：设置或返回元素内容是否可编辑；也可以使用 isContentEditable 属性来查明元素内容是否可编辑；

<!DOCTYPE html>
<html>
<body>

<p id="myP" contenteditable="true">请尝试改变此文本。</p>

<button onclick="myFunction(this);">禁用 p 元素文本编辑！</button>

<p id="demo"></p>

<script>
function myFunction(button) {
    var x = document.getElementById("myP");
        if (x.contentEditable == "true") {
            x.contentEditable = "false";
            button.innerHTML = "启用 p 元素文本编辑！";
        } else {
            x.contentEditable = "true";
            button.innerHTML = "禁用 p 元素文本编辑！";
        }
}
</script>

</body>
</html>

9）element.dir 属性设置或返回元素的文本方向；

<!DOCTYPE html>
<html>

<body id="myid" dir="rtl">

  <script>
    var x = document.getElementsByTagName('body')[0];
    document.write("文本方向：" + x.dir);
    document.write("<br>");
    document.write("替代方法：");
    document.write(document.getElementById('myid').dir);
  </script>

</body>

</html>

运行结果

10）element.firstChild 属性：返回指定节点的首个子节点，以 Node 对象；

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来获得文档首个子节点的节点名。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.firstChild.nodeName;
}
</script>

</body>
</html>

运行结果

11）element.getAttribute() 方法：返回指定属性名的属性值，如果您希望以 Attr 对象返回属性，请使用 getAttributeNode；

<!DOCTYPE html>
<html>
<body>

请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，

<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script>

</body>
</html>

运行结果

12）element.getAttribute() 方法：返回指定属性名的属性值，以 Attr 对象，如果您只需要返回属性值，请使用 getAttribute；

<!DOCTYPE html>
<html>
<body>

请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，

<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
var x=document.getElementById("demo");
x.innerHTML=a.getAttributeNode("target");
}
</script>

</body>
</html>

运行结果

13）element.hasAttribute()方法：如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false；

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来查看 button 元素是否拥有 onclick 属性。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var btn=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=btn.hasAttribute("onclick");
}
</script>

<p>Internet Explorer 8 以及更早的版本不支持该方法。</p>

</body>
</html>

运行结果

14）element.hasAttributes()方法：如果指定节点拥有属性，则 hasAttributes() 方法返回 true，否则返回 false；如果指定节点不是元素节点，则返回值始终是 false；

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来查看 body 元素是否拥有属性。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.body.hasAttributes();
}
</script>

<p>请尝试向 body 元素添加属性，结果将是 true 而不是 false。</p>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持该方法。</p>

</body>
</html>

运行结果

15）element.hasChildNodes() 方法：如果指定节点拥有子节点，则返回 true，否则返回 false；

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮来查看列表元素是否拥有子节点。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var lst=document.getElementById("myList");
var x=document.getElementById("demo");
x.innerHTML=lst.hasChildNodes();
}
</script>

<p>请尝试删除列表元素中的子节点，结果将是 true 而不是 false。</p>

<p><b>注释：</b>。</p>

<p>请尝试删除列表元素的子节点，结果将是 true 而不是 false。</p>
<p><b>注释：</b>节点中的空白被视为文本节点，因此如果在元素中留有空白或换行，则元素依然有子节点。</p>
</body>
</html>

运行结果

16）element.id 属性：设置或返回元素的 id；

<!DOCTYPE html>
<html>
<body>
 
<p><a id="myAnchor" href="http://www.w3school.com.cn">访问 W3School.com.cn</a></p>

<script>
var x=document.getElementById("myAnchor");
document.write(x.id);
</script>

</body>
</html>

运行结果

17）innerHTML 属性：设置或返回元素的 inner HTML；

<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">微软</a>
<input type="button" onclick="changeLink()" value="更改链接">

</body>
</html>

运行结果

18）element.insertBefore() 方法：在您指定的已有子节点之前插入新的子节点，如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI；您也可以使用 insertBefore 方法插入/移动已有元素；

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>

// 注释：首先请创建一个 LI 节点，然后创建一个文本节点
// 然后向这个 LI 节点追加文本节点，最后在列表中的首个子节点之前插入此 LI 节点

</body>
</html>

运行结果

19）element.isContentEditable 属性：返回元素的内容是否可编辑，该属性为只读，请使用 contentEditable 属性来改变元素的可编辑状态；

<!DOCTYPE html>
<html>
<body>

<p id="myP" contenteditable="true">请点击按钮来检查本元素是否可编辑。</p>

<button onclick="myFunction()">试一下</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myP").isContentEditable;
    document.getElementById("demo").innerHTML = x + " = p 元素可编辑。如需查看效果，请尝试改变其文本。";
}
</script>

</body>
</html>

运行结果

20）element.isDefaultNamespace() 方法：如果指定的命名空间是默认的，返回 true，否则返回 false；

<!DOCTYPE html>
<html>

<body>

<p id="demo">点击按钮来查看指定的命名空间是否是默认的。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var d=document.documentElement;
var x=document.getElementById("demo");
x.innerHTML=d.isDefaultNamespace("http://www.w3.org/1999/xhtml");
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 isDefaultNamespace 方法。</p>

</body>
</html>

运行结果

21）element.isEqualNode() 方法：检查两个节点是否相等，如果下例条件为 true，则两个节点相等：
节点类型相同；
拥有相同的 nodeName、NodeValue、localName、nameSpaceURI 以及前缀；
所有后代均为相同的子节点；
拥有相同的属性和属性值（属性次序不必一致）；
提示：请使用 isSameNode() 方法来检测两节点是否是相同节点；

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('myList1','myList2')">比较列表 1 和列表 2：</button>
<button onclick="myFunction('myList1','myList3')">比较列表 1 和列表 3：</button>

<p id="demo">点击按钮来比较两个列表中的首个项目。</p>

列表 1：
<ul id="myList1"><li>Water</li><li>Milk</li></ul>
列表 2：
<ul id="myList2"><li>Coffee</li><li>Tea</li></ul>
列表 3：
<ul id="myList3"><li>Water</li><li>Fire</li></ul>

<script>
function myFunction(x,y)
{
var item1=document.getElementById(x).firstChild;
var item2=document.getElementById(y).firstChild;
var x=document.getElementById("demo");
x.innerHTML=item1.isEqualNode(item2);
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 isEqualNode 方法。</p>

</body>
</html>

运行结果

22）element.isSameNode() 方法：检查两节点是否是相同的节点；如果两节点是相同的节点，isSameNode() 方法返回 true，否则返回 false；
提示：请使用 isEqualNode() 方法来检查两节点是否相等，但不必是相同节点；

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">试一下</button>

<p id="demo">请点击按钮来检查 myList 元素是否与文档的首个列表元素相同。</p>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<script>
function myFunction()
{
var item1=document.getElementById("myList");
var item2=document.getElementsByTagName("UL")[0];
var x=document.getElementById("demo");
x.innerHTML=item1.isSameNode(item2);
}
</script>

<p><b>注释：</b>Firefox 版本 10 停止对此方法的支持，因为 DOM version 4 中已弃用该方法。作为替代，您应该使用 === 来比较两节点是否相同。</p>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持该方法。</p>

</body>
</html>

运行结果

23）element.isSupported() 方法：检测指定节点是否支持指定特性；

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">试一下</button>

<p id="demo">点击按钮来检查 button 元素是否支持特性 Core XML DOM Level 2。</p>

<script>
function myFunction()
{
var item=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=item.isSupported("Core","2.0");
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持该方法。</p>

</body>
</html>

运行结果

24）element.lang 属性：设置或返回元素的语言代码；

<!DOCTYPE html>
<html>
<body id="myid" lang="en-us">

<script>
var x=document.getElementsByTagName('body')[0];
document.write("Body 语言：" + x.lang);
document.write("<br>");
document.write("替代方法：");
document.write(document.getElementById('myid').lang);
</script>

</body>
</html>

运行结果

25）element.lastChild 属性：返回指定节点的最后一个子节点，以 Node 对象；

<!DOCTYPE html>
<html>
<body>

<p>列表示例：</p>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮来获得列表最后一个子节点的节点名。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var l=document.getElementById("myList");
var x=document.getElementById("demo");
x.innerHTML=l.lastChild.nodeName;
}
</script>


<p><b>注释：</b>元素中的空白被视作文本，而文本被视作文本节点。</p>

<p>请尝试在 UL 关闭标签之前添加空格，结果将是节点 name=#text。</p>

</body>
</html>

运行结果

26）element.namespaceURI 属性：返回指定节点的命名空间的 URI；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<body>

<p id="demo">请点击按钮来获得文档命名空间的 URI。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.documentElement.namespaceURI;
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 namespaceURI 属性。</p>

</body>
</html>

运行结果

27）element.nextSibling 属性：返回指定节点之后紧跟的节点，在相同的树层级中，被返回的节点以 Node 对象返回；如果没有 nextSibling 节点，则返回值为 null；

<!DOCTYPE html>
<html>
<body>

<p>列表示例：</p>
<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>

<p id="demo">点击按钮来获得首个项目的下一个同胞的 id。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.getElementById("item1").nextSibling.id;
}
</script>

<p><b>注释：</b>元素中的空格被视作文本，而文本被视作文本节点。</p>

<p>请尝试在两个 <li> 元素之间添加空格，结果将是 "undefined"。</p>

</body>
</html>

运行结果

28）element.nodeType 属性：以数字值返回指定节点的节点类型；
如果节点是元素节点，则 nodeType 属性将返回 1；
如果节点是属性节点，则 nodeType 属性将返回 2；

属性值

<!DOCTYPE html>
<html>
<body><p id="demo">请点击按钮来获得 body 元素子节点的节点类型。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
  {
  txt=txt + c[i].nodeType + "<br>";
  };
var x=document.getElementById("demo");  
x.innerHTML=txt;
}
</script>

<p><b>注释：</b>元素中的空格被视作文本，而文本被视作文本节点。</p>

</body>
</html>

运行结果

29）element.nodeValue 属性:设置或返回指定节点的节点值;

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来获得 button 元素的节点值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");  
x.innerHTML=c.childNodes[0].nodeValue;
}
</script>

<p><b>注释：</b>元素内的文本节点被视作文本节点，因此我们返回 button 元素的首个子节点（childNodes[0]）的节点值。</p>

</body>
</html>

element.nodeValue

30）element.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>

31）element.ownerDocument 属性：以 Document 对象的形式返回节点的 owner document，在 HTML 中，HTML 文档本身始终是元素的 ownerDocument；

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来获得 <p> 元素的 ownerDocument 的节点类型。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=x.ownerDocument.nodeType;
}
</script>

</body>
</html>

element.ownerDocument

32）element.parentNode 属性：以 Node 对象的形式返回指定节点的父节点，如果指定节点没有父节点，则返回 null；

<!DOCTYPE html>
<html>
<body>

<p>列表示例：</p>
<ul><li>Coffee</li><li>Tea</li></ul>

<p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
var y=document.getElementsByTagName("LI")[0];
x.innerHTML=y.parentNode.nodeName;
}
</script>

</body>
</html>

element.parentNode

33）element.previousSibling 属性：返回同一树层级中指定节点的前一个节点，被返回的节点以 Node 对象的形式返回，如果没有 previousSibling 节点，则返回值是 null；

<!DOCTYPE html>
<html>

<body>

  <p>列表示例：</p>
  <ul id="myList">
    <li id="item1">Coffee</li><li id="item2">Tea</li>
  </ul>

  <p id="demo">请点击按钮来获得第二个列表项的前一个同胞的 id。</p>

  <button onclick="myFunction()">试一下</button>

  <script>
    function myFunction(){
      var itm = document.getElementById('item2');
      var x = document.getElementById('demo');
      x.innerHTML = itm.previousSibling.id;
    }
  </script>

  <p><b>注释：</b>元素内的空白字符被视作文本，而文本被视作节点。</p>

  <p>请在两个 <li> 元素之间添加空格，结果将是 "undefined"。</p>

</body>

</html>

element.previousSibling

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

<!DOCTYPE html>
<html>

<body>

  <h1 style="color:red">Hello World</h1>

  <p id="demo">点击按钮来删除标题中的 style 属性。</p>

  <button onclick="myFunction()">试一下</button>

  <script>

    function myFunction(){
      document.getElementsByTagName('h1')[0].removeAttribute('style');
    }
  </script>

</body>

</html>

element.removeAttribute()

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

<!DOCTYPE html>
<html>

<body>

  <h1 style="color:red">Hello World</h1>

  <p id="demo">点击按钮来删除标题中的 style 属性节点。</p>

  <button onclick="myFunction()">试一下</button>

  <script>
    function myFunction() {
      var n = document.getElementsByTagName('h1')[0];
      var a = n.getAttributeNode('style');
      n.removeAttributeNode(a);
    }
  </script>

</body>

</html>

element.removeAttributeNode()

36）element.removeChild() 方法：删除指定元素的某个指定的子节点，以 Node 对象返回被删除的节点，如果节点不存在则返回 null；

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo">点击按钮来删除列表中的首个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>

</body>
</html>

element.removeChild()

37）element.replaceChild() 方法：用新节点替换某个子节点，这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点；

<!DOCTYPE html>
<html>

<body>

  <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

  <p id="demo">点击按钮来替换列表中的首个项目。</p>

  <button onclick="myFunction()">试一下</button>

  <script>
    function myFunction() {
      var textnode = document.createTextNode('water');
      var item = document.getElementById('myList').childNodes[0];
      item.replaceChild(textnode, item.childNodes[0]);
    }
  </script>

  <p>首先创建一个新的文本节点。<br>然后替换首个列表项中的首个子节点。</p>
    <p><b>注释：</b>本例用文本节点 "Water" 替换文本节点 "Coffee"，而不是整个 LI 元素，这是替换节点的另一种方法。</p>
</body>

</html>

element.replaceChild()

38）element.setAttribute() 方法：添加指定的属性，并为其赋指定的值，如果这个指定的属性已存在，则仅设置/更改值；

<!DOCTYPE html>
<html>
<body>

<input value="OK">

<p id="demo">点击按钮来设置按钮的 type 属性。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
}
</script>

<p>Internet Explorer 8 以及更早的版本不支持此方法。</p>

</body>
</html>

element.setAttribute()

39）element.tabIndex 属性：设置或返回元素的 tab 键控制次序；

<!DOCTYPE html>
<html>
<head>
<script>
function changeTabIndex()
{
document.getElementById('1').tabIndex="3";
document.getElementById('2').tabIndex="2";
document.getElementById('3').tabIndex="1";
}
</script>
</head>
<body>
<p><a id="1" href="http://www.w3schools.com">1</a></p>
<p><a id="2" href="http://www.w3schools.com">2</a></p>
<p><a id="3" href="http://www.w3schools.com">3</a></p>

<input type="button" onclick="changeTabIndex()"
value="更改 TabIndex">

<p>请在按下 “更改 TabIndex” 按钮前后事宜 tab 键在链接间导航。</p>

</body>
</html>

element.tabIndex

40）element.tagName 属性：返回元素的标签名，在 HTML 中，tagName 属性的返回值始终是大写的；

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮来显示此元素的标签名。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=x.tagName;
}
</script>

</body>
</html>

element.tagName

41）element.textContent 属性：设置或返回指定节点的文本内容，以及它的所有后代，如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点，有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本；

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮来获得 button 元素的文本内容。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");  
x.innerHTML=c.textContent;
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此属性。</p>

</body>
</html>

element.textContent 属性

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>

<p id="demo">点击按钮来获得列表元素的文本内容。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var lst=document.getElementById("myList");
var x=document.getElementById("demo");  
x.innerHTML=lst.textContent;
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此属性。</p>

<p><b>注释：</b>文本内容包含所有子节点的文本。</p>

</body>
</html>

element.textContent 属性

42）element.title 属性：设置或返回元素的咨询标题；

<!DOCTYPE html>
<html>
<body id="myid" title="mytitle">

<script>
var x=document.getElementsByTagName('body')[0];
document.write("Body title: " + x.title);
document.write("<br>");
document.write("替代方法：");
document.write(document.getElementById('myid').title);
</script>

</body>
</html>

element.title

<!DOCTYPE html>
<html>
<body>

<img src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area id="sun" shape="rect" coords="0,0,110,260"
href ="/example/html/sun.html" target ="_blank"
title="Sun" />

</map>

<p>太阳的咨询性标题是（请把鼠标移动到太阳上）：
<script>
var x=document.getElementById('sun');
document.write(x.title);
</script>
</p>

</body>
</html>

element.title

43）element.item() 方法：返回节点列表中位于指定索引的节点，以下两条语法产生相同的结果：

document.body.childNodes.item(0);
document.body.childNodes[0];

<!DOCTYPE html>
<html>
<body><p id="demo">点击按钮来获得 body 元素首个子节点的名称。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.body.childNodes.item(0).nodeName;
}
</script>

</body>
</html>

element.item()

44）element.length 属性：返回集合中的节点数量，Node 对象的子节点集合是 NodeList 对象的实例；

<!DOCTYPE html>
<html>
<body><p id="demo">点击按钮来查看 body 元素拥有多少子节点：</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.body.childNodes.length;
}
</script>

<p><b>注释：</b>元素内或元素间的空白字符被视作文本，而文本被视作文本节点。</p>

</body>
</html>

element.length

BOM，DOM

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端面试基础必备

JS学习笔记