BOM，DOM

一、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
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容

  • 九、DOM
      DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。   DOM 描绘...
    霜天晓阅读 3,613评论 0赞 7
  • 十一、DOM2 和DOM 3
      DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,422评论 1赞 3
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,096评论 0赞 21
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,095评论 0赞 3
  • BOM&DOM
    javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览...
    Lethe35阅读 614评论 0赞 4