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阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

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