前端面试基础必备JS学习笔记

BOM，DOM

2018-09-06  本文已影响3人  puxiaotaoc

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

二、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属性对其进行访问；

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

属性和方法
属性和方法
属性和方法 
<!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>
运行结果 
// 将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>
点击按钮前
点击按钮后 
<!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>


<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果

注意：返回值可以是值的组合。例如，返回 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>
运行结果 
<!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>


<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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>
运行结果 
<!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 
<!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>


<!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 
<!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 
<!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 
<!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() 
<!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() 
<!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() 
<!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() 
<!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() 
<!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 
<!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 
<!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 属性 
<!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 
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() 
<!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
上一篇下一篇

猜你喜欢

热点阅读