JavaScript-----基础概念整理

DOM Document对象属性和方法

document.getElementById(elememtID)

定义和用法

这个方法可以返回拥有指定ID的第一个对象。如果没有指定ID的元素,则返回 null。如果存在多个指定ID的元素，则返回 undefined。

语法

document.getElementById(elementID)

例子

<div id="dome"></div>
<script>
    document.getElementById("demo");  //注意这里要加引号，因为参数值的类型是字符串形式
</script>

document.getElementByClassName(classname)

定义和用法

这个方法返回文档中所有指定类名的元素集合，作为NodeList对象。NodeList对象代表一个有顺序的节点列表。NodeList对象 可以通过节点列表中的节点索引号来访问列表中的节点（索引号从0开始）。NodeList对象拥有Length属性。具体操作可以得到指定类名的元素个数，并循环各个元素来获取想要的那个元素。

语法

document.getElementByClassName("className1 className2");  //注意加引号，获取多个类名使用空格分隔。还得改为 document.getElementsCalssName("class")--->因为是多个，添加 S

例子

<div class="demo1 demo2"></div>
<dov class="demo1"></dov>
<script>
document.getElementsByClassName("demo1 demo2");
var leng = document.getElementsByClassName("demo1").length;
console.log(leng); //2
</script>

document.getElementName()

定义和用法

这个方法可以返回带有指定名称的对象集合。

语法

document.getElementByName("属性名称")  //还是得加引号

例子

<input type="text" name="headding" value="标题">
<input type="text" name="headding" value="主体">
<script>
document.getElementByName("headding");
var leng = document.getElementByName("headding").length;
console.log(leng); //2
</script>

document.getElementByTagName()

定义和用法

这个方法返回带有指定标签名的对象的集合。参数值如果是 “ * ” 则返回文档所有元素。

语法

document.getElementByTagName("标签的名称")  //还是得加引号

例子

<input type="text" name="headding" value="标题">
<input type="text" name="headding" value="主体">
<script>
　　document.getElementByTagName("input");
</script>

doucment.querySelector()

定义和用法

这个方法返回文档中匹配指定css选择器的一个元素。注意此方法仅仅返回匹配到指定选择器的第一个元素。如果要返回所有元素，可使用querySelectorAll（）方法代替。

语法

document.querySelector("css selectors");  // 还是添加引号，但是要注意的是此处选择ID名称时名称前要加上 # 如（“#id”），选择Classm名称时要加上 . 如 （".class"）,标签不变

对于多个选择器，使用逗号隔开,如（"h2,h3"），返回匹配的元素。(只返回多个选择器，匹配到的第一个)

例子

<input type='text' id='txt1' />
<select id='select' onblur="num3">
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' />
<input type='text' id='fruit' />
<div class="demo1 demo2"></div>
<dov class="demo1"></dov>
<input type="text" name="headding" value="标题">
<input type="text" name="headding" value="主体">
<script>
document.querySelector("#txt1");
document.querySelector(".demo1");
document.querySelector("input"); //返回此元素 <input type='text' id='txt1' />
document.querySelector("div.demo2"); //返回此元素 <div class="demo1 demo2"></div>
document.querySelector("input[value]") //返回此元素 <input type='button' value='='/>
document.querySelector("select,input") //在文档中select前有一个inpout所以选择时，第一个找到的是谁，就返回谁，不再继续查找。
</script>

document.querySelectorAll()

定义和用法

这个方法返回文档中匹配指定css选择器的所有元素，返回NodeList对象。

NodeList对象表示节点集合。可以通过索引访问，索引从0开始。可以使用对象的length属性，遍历所有元素，从而获取想要的元素，进行DOM操作。

语法

document.querySelectorAll("css selectors"); // 还是添加引号，但是要注意的是此处选择ID名称时名称前要加上 # 如（“#id”），选择Classm名称时要加上 . 如 （".class"）,标签不变

对于多个选择器，使用逗号隔开，如（"h3,h4"），返回匹配的元素。（注意次选择器返回所有匹配到的元素）

例子

<h1>一个 h1 元素</h1>
<div>一个 div 元素</div>
<p>一个 p 元素。</p>
<p>另一个 p 元素。</p>
<div class="example">
    <p>在 div 中的一个 p 元素。</p>
</div>
<span>
    <div>235424</div>
</span>
<p>修改了文档中所有 p 元素和 div 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong>Internet Explorer 8 及更早版本不支持 querySelectorAll() 方法。</p>
<script>
function myFunction() {
    var x = document.querySelectorAll("p,div");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

 document.activeElement()

定义和用法

这个方法返回文档获取当前获得焦点的元素，就是当前被聚焦的元素。

语法

document.activeElement

例子

document.activeElement该对象可以获取当前页面活动的元素，比onfocus()事件范围更广一些，比如在树状图或者用frame框架嵌套页面时对某个frame当前正在活动的元素进行操作就可以用该元素获取。
下面是部分代码：
 页面代码：
<tr>
    <td style="color:#033d61">
        <a id="role<%=i%>" href="roleInfo.jsp?roleId=<%=role.getRole_id() %>" target="roleInfo" style="color:#033d61">
    <img alt="" src="images/page.gif" border="0px" ><%=role.getRole_name() %>
    </a>
    </td>
</tr>
脚本代码：
<script>
document.onclick = function(e) {
    //document.activeElement.style.color="red";
    var l = <%=roles.size()%>;
    for (var i = 0; i < l; i++) {
        document.getElementById("role" + i).style.color = "#033d61";
    }
    document.activeElement.style.color = "red";
}
</script>

addEventListener()

定义和用法

这个方法用于向文档添加事件句柄。也就是给DOM元素添加事件。

语法

document.addEventListener(event,  function,  useCapture)

参数

event        描述事件名称的字符串       注意不要使用“on”前缀，例如，使用“click”来取代“onclick”

function     描述事件触发后执行的函数    当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如，“click”事件属于MouseEvent（鼠标事件）对象

useCapture   可选。布尔值，指定事件是否在捕获冒泡阶段执行  true事件句柄在捕获阶段执行  false默认。事件句柄在冒泡段执行

例子

简介

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void

他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，
表示在事件冒泡阶段调用事件处理程序。

使用

1.事件添加

addEventListener 可以在一个元素上多次添加事件。就是新添加的事件不会覆盖已存在的事件。


var oDiv = document.getElementById("div1");

oDiv.addEventListener("click",
function() {
    alert(this.id);
},
false);

oDiv.addEventListener("click",
function() {
    alert("clicked me");
},
false);


点击oDiv节点后，先输出节点id“div1”，再输出“clicked me”。

2.事件移除

addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除；移除时传入的参数与添加处理程序时使用的参数相同。
这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。


var oDiv = document.getElementById("div1");

oDiv.addEventListener("click",
function() {
    alert(this.id);
},
false);

oDiv.removeEventListener("click",
function() { 
    alert(this.id);
},
false); // 无效



虽然 removeEventListener() 看似使用了相同的参数，但是实际上传入的那个是另一个完全不同的函数。所以如果想正确的移除事件，写法如下所示。


var oDiv = document.getElementById("div1");

var handler = function() {
    alert(this.id);
}

oDiv.addEventListener("click", handler, false);

oDiv.removeEventListener("click", handler, false); // 有效



讨论

这里我们主要讨论 useCapture 参数的用法。首先看一段代码。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1" style="background: blue; 100px; height: 100px;">
        <div id="div2" style="background: red; 70px; height: 70px;">
            <div id="div3" style="background: yellow; 50px; height: 50px;"></div>
        </div>
    </div>
    <script type="text/javascript">
        var oDiv1 = document.getElementById('div1'),
            oDiv2 = document.getElementById('div2'),
            oDiv3 = document.getElementById('div3');

        oDiv1.addEventListener('click', showBlue, true);
        oDiv2.addEventListener('click', showRed, false);
        oDiv3.addEventListener('click', showYellow, true);

        function showBlue(){ //蓝
            alert("blue");
        }

        function showRed(){ //红
            alert("red");
        }

        function showYellow(){//黄
            alert("yellow");
        }
    </script>
</body>
</html>


点击div3之后，过程分为三个阶段：

捕获阶段: 外-->里 在div1处检测useCapture属性为true，即事件捕获阶段会触发事件，所以会执行程序，输出“blue”。在div2处检测useCapture属性为false，即事件冒泡阶段才会触发，
所以不会执行程序。

目标阶段: 目标到div3处，发现div3就是鼠标点击的节点， 所以这里是目标阶段。若有事件处理程序，则执行该程序，输出“yellow”。这里不论 useCapture 为 true 还是 false。

冒泡阶段: 里-->外 在div2处检测useCapture属性为false，即事件冒泡阶段才会触发，所以会执行程序，输出“red”。在div1处检测useCapture属性为true，即事件捕获阶段会触发事件，
所以不会执行程序。

程序的运行结果为：“blue”，“yellow”，“red”。

adoptNode()

定义和用法

这个方法用于从另外一个文档中获取一个节点。

节点可以是任何节点类型。

注意：节点下的所有节点都会获取到。

注意：节点及其子节点会在源文档中删除。

提示：使用 document.importNode() 方法来拷贝节点，但源文档中的节点不删除。

提示：使用 document.cloneNode() 方法来拷贝当前文档的节点，且节点不会被删除。

语法

document.adoptNode( node )

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<iframe src="//www.runoob.com/html/html-tutorial.html" style="height:380px;520px;"></iframe>

<p>点击以下按钮获取 iframe 中 h1 节点，并显示在本页中。</p>

<p><strong>注意:</strong> Internet explorer 8 及更早 IE 版本支持该方法。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var frame = document.getElementsByTagName("IFRAME")[0]  //先获取到 iframe

    var h = frame.contentWindow.document.getElementsByTagName("H1")[0]; // 这表示iframe里的 h1元素。 
　　　　
　　contentWindow属性能够以HTML对象来返回iframe中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。　　

    var x = document.adoptNode(h);  //得到 iframe 里的 h1元素获取到当前页面中。

    document.body.appendChild(x);
　　
　　

}
</script>

</body>
</html>

anchors集合

定义和用法

anchors集合返回了当前页面的所有超级链接数组。

语法

document.anchors[].property

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<a name="html">HTML </a><br>
<a name="css">CSS 程</a><br>
<a name="xml">XML 教</a><br>
<a href="/js/">JavaScript 教程</a>

<p>锚的数量:
<script>
document.write(document.anchors.length); //只获取所有的 a元素。
</script></p>

</body>
</html>

cookie 属性

定义和用法

这个属性返回当前文档所有  键 、值 对的所有 cookies

语法

document.cookie

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

与此文档相关的Cookies: 

<script>
document.write(document.cookie);
</script>

</body>
</html>