JavaScript-----基础概念整理 DOM Document对象属性和方法

document.getElementById(elememtID)

定义和用法

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

语法

document.getElementById(elementID)

例子

<div ></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 >
    <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 >
        <div >
            <div ></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>

JavaScript-----基础概念整理
DOM Document对象属性和方法

JavaScript-----基础概念整理 DOM Document对象属性和方法

document.getElementById(elememtID)

定义和用法

语法

例子

document.getElementByClassName(classname)

定义和用法

语法

例子

document.getElementName()

定义和用法

语法

例子

document.getElementByTagName()

定义和用法

语法

例子

doucment.querySelector()

定义和用法

语法

例子

document.querySelectorAll()

定义和用法

语法

例子

document.activeElement()

定义和用法

语法

例子

addEventListener()

定义和用法

语法

例子

adoptNode()

定义和用法

语法

例子

anchors集合

定义和用法

语法

例子

cookie 属性

定义和用法

语法

例子

相关推荐