JS 之Document对象获取byId byName byTagName

本文链接：https://blog.youkuaiyun.com/lxf512666/article/details/52889117

JS 对象模型Document 的标签节点获取 byId byName byTagname

一、关于Document

《一》、DOM 全称是Document Object Model 文档对象模型

<1>、Document 对象的理解：

第一点：Document它管理了所有的Html文档内容。

第二点：document它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签 都 对象化 

第四点：我们可以通过document访问所有的标签对象。

<2>、有了Document对象自然有了其对象的一些基本属性，在Document中

主要的操作对象时节点 Node

节点：Node——构成HTML文档最基本的单元。

节点我们关心的主要是：

        元素节点：HTML文档中的HTML标签

        属性节点：标签的属性

        文本节点：HTML标签中的文本内容

<3>、节点的常用属性

nodeName表示节点名

nodeType表示节点类型

nodeValue表示节点值

<4>三类节点的三个属性如下：

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

<5>、举例：

<div id="div01">hello world</div>

在上面的这个标签中
<div>         是元素节点
id=”div01”    是属性节点
hello world   是文本节点

对于三类节点属性用alert()测试如下：

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
<script type="text/javascript">

    //动态注册页面加载完成onload事件
    window.onload = function() {

    // <div> 元素节点
    var divObj = document.getElementById("div01");
    alert(divObj.nodeName);  // 节点名 DIV
    alert(divObj.nodeType);  // 节点类型 1
    alert(divObj.nodeValue); // 节点值 null

    // id=”div01” 是属性节点
    var idNode = divObj.getAttributeNode("id");
    alert(idNode.nodeName);    // 节点名  id
    alert(idNode.nodeType);   // 节点类型 2
    alert(idNode.nodeValue); // 节点值  属性值 div01

    // hello world 是文本节点
    var textNode = divObj.firstChild;
    alert(textNode.nodeName);   // 节点名  #text
    alert(textNode.nodeType);   // 节点类型 3
    alert(textNode.nodeValue);  // 节点值  文本内容
    }
</script>
    </head>
    <body>
    <div id="div01">hello world</div>
    </body>
    </html>

★★二、Document中查找标签dom对象的三种方法

<一>document.getElementById(elementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值
<二>document.getElementsByName(elementName)

通过标签的name属性查找标签dom对象，elementName标签的name属性值

<三>document.getElementsByTagName(tagname)

通过标签名查找标签dom对象。tagname是标签名

（1）使用document.getElementById(elementId)获取dom对象

如:使用document.getElementById(elementId)

例：表单提交时验证账号输入是否合法（通过byId获取dom对象然后使用）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

// 页面加载完成之后
window.onload = function() {

    //我们要操作所有的标签对象都要分两步
    // 1.先获取标签对象
    var usernameObj = document.getElementById("username");

    // 2.操作标签对象的属性或者方法
    alert("修改原用户为我已经改变);

    usernameObj.value = "我已经改变";
         //  usernameObj.type="password";

这里效果如下：
这里写图片描述
// 获取button按钮的标签对象
var buObj = document.getElementById(“bu01”);

    // 动态给按钮绑定单击事件 
    buObj.onclick = function() {

        //我们希望点击按钮之后。获取用户名输入框里的文本内容做合法性验证
        // 验证用户名必须由字母，字母，下划线组成。并且长度是6到15位

        //1.先获取标签对象
        var usernameObj = document.getElementById("username");

        //2.通过标签对象.value获取输入框里的文本内容
        var usernameObjText = usernameObj.value;

        //3.我们创建一个正则对象去验证
        var patt = /^\w{6,15}$/;//只能为数字或字母或下划线6-15位

        var result = patt.test(usernameObjText);

        //4.提示用户
        var spanObj = document.getElementById("usernameSpan");
        // innerHTML

        if (result) {

// alert("用户名合法");添加图片显示效果
            spanObj.innerHTML = "<img alt='' width='15' height='15' src=\"right.png\"/>";

不合法效果如下：
这里写图片描述
} else {
// alert(“用户名不合法”);添加图片显示效果
spanObj.innerHTML = “ $width='15' height='15' src=\$ ”;
}
}
}

合法效果如下：
这里写图片描述

</script>
</head>
<body>
用户名：<input id="username" type="text" value="7abc"/>
<span id="usernameSpan" style="color: red;"></span><br/>
密码：&nbsp;&nbsp;&nbsp;<input id="password" type="password" /><br />
<button id="bu01">提交</button>
</body>
</html>

（2）使用document.getElementsByName(elementName)获取dom对象

如:使用document.getElementsByName(elementName)

简单说明：

实现多选按钮的checkBox 的全选全不选反选功能如下>>>>

//页面加载完成之后做如下测试：

window.onload = function() {

// 通过name属性查找所有的标签对象

var hobbyObjs = document.getElementsByName(“hobby”);

// getElementsByName方法查找的是name属性，返回的是一个集合，

// 我们对这个集合的操作，也就是获取其中的元素跟数组一样

// 这个集合中的元素出现的顺序

就是这些标签在html页面中从上到下出现的顺序可以做如下测试

// alert(hobbyObjs.length); 结果：4

// alert(hobbyObjs); 结果：Object noteList

// var checkBoxObj = hobbyObjs[3];

// alert(checkBoxObj.checked); 结果：true

// checkBoxObj.checked = true;

}

实现三个选择功能如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//①全选功能
function checkAll(){

    //1.先获取要操作所有的标签对象input type=checkbox
    var hobbyObjs = document.getElementsByName("hobby");

    //alert(hobbyObjs.length);

效果：
这里写图片描述
//alert(hobbyObjs);
效果：

这里写图片描述
//2.遍历所有的标签对象，获取到每一个input type=checkbox
for (var i = 0; i < hobbyObjs.length; i++) {
var hobbyObj = hobbyObjs[i];

        //3.修改每一个复选框标签对象的checked属性值为true
        hobbyObj.checked = true;
    }
}

//②全不选功能
function checkNoAll(){

    //1.先获取要操作所有的标签对象input type=checkbox
    var hobbyObjs = document.getElementsByName("hobby");

    //2.遍历所有的标签对象，获取到每一个input type=checkbox
    for (var i = 0; i < hobbyObjs.length; i++) {
        var hobbyObj = hobbyObjs[i];

        //3.修改每一个复选框标签对象的checked属性值为false
        hobbyObj.checked = false;
    }
}

//③反选功能
function checkReverse(){

    //1.先获取要操作所有的标签对象input type=checkbox
    var hobbyObjs = document.getElementsByName("hobby");

    //2.遍历所有的标签对象，获取到每一个input type=checkbox
    for (var i = 0; i < hobbyObjs.length; i++) {

    //3.修改每一个复选框标签对象的checked属性值为相反状态    
        var hobbyObj = hobbyObjs[i];
        hobbyObj.checked = !hobbyObj.checked;
    }
}
</script>
</head>
<body>
兴趣爱好：
<input name="hobby" type="checkbox" value="c" checked="checked" />C
<input name="hobby" type="checkbox" value="cpp"/>C++
<input name="hobby" type="checkbox" value="java"/>java
<input name="hobby" type="checkbox" value="csharp"/>C#
<button onclick="checkAll()">全选</button>
<button onclick="checkNoAll()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

（2）使用document.getElementsByTagName(tagname)获取dom对象

例：使用document.getElementsByTagName(tagname)

实现全选功能：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

// 页面加载完成之后
window.onload = function(){
// 通过标签名查找所有给定标签名的对象集合
//      var inputObjs = document.getElementsByTagName("input");

// getElementsByTagName方法返回的也是对象集合。
// 我们要获取这个集合中的元素，可以像数组一样操作。通过下标获取

//      alert(inputObjs);
//      alert(inputObjs.length);

//查找所有button按钮
    var buttonObjs = document.getElementsByTagName("button");

//      alert(buttonObjs.length);  测试长度

    var buttonObj = buttonObjs[0];

    buttonObj.onclick = function(){
        //1.先获取标签对象
        var inputObjs = document.getElementsByTagName("input");

        //2.遍历修改每一个标签对象的checked的属性为true
        for (var i = 0; i < inputObjs.length; i++) {
            inputObjs[i].checked = true;
        }
    }
}

function abc(){
    var hobbyObjs = document.getElementsByName("hobby");
    alert(hobbyObjs.length);
}

</script>
</head>
<body>

    <input name="hobby" type="checkbox" value="c" checked="checked" />C
    <input type="checkbox" value="cpp"/>C++
    <input type="checkbox" value="java"/>java
    <input type="checkbox" value="csharp"/>C#

<button>全选</button>
</body>
</html>

效果：

这里写图片描述