Java Script（二）——Document对象介绍

其他 2021-01-30 13:31
0 阅读

JavaScript（二）

Document对象

  • 第一点：Document管理了所有的HTML 文档内容。
  • 第二点：document它是一种树结构的文档。有层级关系。
  • 第三点：它让我们把所有的标签 都 对象化。
  • 第四点：我们可以通过 document 访问所有的标签对象。

相当于：

Class Dom{
    
     
private String id; // id 属性 
private String name; //name属性
private String tagName; //表示标签名 
private Dom parentNode; //父亲 
private List<Dom> children; // 孩子结点 
private String innerHTML; // 起始标签和结束标签中间的内容 
    ......
}

每个使用的标签都有一个独一无二的id，但多个标签可能会有相同的name，也可以使用多个相同的标签。

因此查询起来的话，通过id可查询到独一无二的单个标签，通过name或者标签名tagName查询，会得到多个标签的集合。

1. Document 对象中的方法介绍

  • document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

  • document.getElementsByName(elementName)

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

  • document.getElementsByTagName(tagname)

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

  1. document 对象的三个查询方法，
    如果有 id 属性，优先使用 getElementById 方法来进行查询
    ​ 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
    ​ 如果 id 属性和 name 属性都没有，最后再按标签名查 getElementsByTagName
  2. 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

2. getElementById 方法

注意时element，说明通过id只能得到一个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-13</title>
    <!--
    需求：当用户点击了校验按钮，要获取输出框中的内容。然后验证其是否合法。
    验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
     -->
    <script type="text/javascript">
        function checkLegal(){
     
     
            var usernameObj=document.getElementById("username");
            var usenameSpanObj=document.getElementById("usernameSpan");
            var usernameText=usernameObj.value; //获取文本框中的内容,即value属性
            //var Tips=usenameSpanObj.innerText;//innerText 设置span标签的内容
            var patt=/^\w{5,12}$/; //规定正则表达式的规则 ^ $ 从头到尾; \w ; {5,12};
            if (patt.test(usernameText)){
     
     
                usenameSpanObj.innerText="用户名合法";
            }else{
     
     
                usenameSpanObj.innerText="用户名非法";
            }
        }
    </script>
</head>
<body>
   用户名：<input type="text" id="username" name="username"/>
   <span id="usernameSpan" style="color: red"> </span>
      <!-- span标签跟在input标签后面，根据输入文本的合理性显示提示内容-->
   <button onclick="checkLegal()">校验</button>
</body>
</html>

3. getElementsByName 方法

这里就是elements了，说明通过name得到的可能是对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-13</title>
    <script type="text/javascript">
        function checkAll() {
     
     
            var hobbyObjs=document.getElementsByName("hobby");
            //hobbyObjs就是一个数组，数组每个元素是个对象
            for (var i=0;i<hobbyObjs.length;++i){
     
     
                hobbyObjs[i].checked=true;
            }//checked属性，选中就是true，对应on，不选中就是false，对应off
        }
        function checkNo() {
     
     
            var hobbyObjs=document.getElementsByName("hobby");
            for (var i=0;i<hobbyObjs.length;++i){
     
     
                hobbyObjs[i].checked=false;
            }
        }
        function checkReverse() {
     
     
            var hobbyObjs=document.getElementsByName("hobby");
            for (var i=0;i<hobbyObjs.length;++i){
     
     
                hobbyObjs[i].checked=!hobbyObjs[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked"/>cpp
    <input type="checkbox" name="hobby" value="Java"/>Java
    <input type="checkbox" name="hobby" value="JS"/>JS
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

4. getElementsByTagName方法

elements了，说明通过name得到的也是对象集合，代码实验同1.3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-13</title>
    <script type="text/javascript">
        //按照名字属性：name的查找，必须要求标签定义了name属性的值
        //当直接用标签名tagname查找时
        function checkAll() {
     
     
            var inputObjs=document.getElementsByTagName("input");
            for (var i=0;i<inputObjs.length;++i){
     
     
                inputObjs[i].checked=true;
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked"/>cpp
<input type="checkbox" value="Java"/>Java
<input type="checkbox" name="hobby" value="JS"/>JS
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>

5. 节点的常用属性和方法

标签对象就是一种结点

方法：

通过具体的元素节点调用 ：

  1. getElementByID() getElementsByName() getElementsByTagName()

  2. appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：

childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点 (兄弟节点)
previousSibling 属性，获取当前节点的上一个节点 (兄弟节点)
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本

该部分内容请跳转JavaScript练习——Document对象

6. createElement 方法和appendChild 方法举例

目的：使用 js 代码来创建 html 标签，并在js代码中使其显示在页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-14</title>
    <script type="text/javascript">
        var DIYdiv=document.createElement("div");  //此时相当于<div> </div>
        DIYdiv.innerHTML="陆亿行-2021-01-14";     //此时相当于<div>陆亿行-2021-01-14</div>
                                             //注意innerHTML和innerText的区别，前者会保留标签内容，后者只有文本，这里二者都行
        document.body.appendChild(DIYdiv);
           //此时需要在body中添加一个节点即可。
    </script>
</head>
<body>

</body>
</html>

但是这样是错误的，因为页面执行是从下到上依次执行的，当执行到第10行时，还没有body，此时会出现null：document.null ，因此做一下改进，动态方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-14</title>
    <script type="text/javascript">
        window.onload =function (){
     
     
            
            var DIYdiv=document.createElement("div");  //此时相当于<div> </div>
            DIYdiv.innerHTML="陆亿行-2021-01-14";     //此时相当于<div>陆亿行-2021-01-14</div>
            //注意innerHTML和innerText的区别，前者会保留标签内容，后者只有文本，这里二者都行
            document.body.appendChild(DIYdiv);
            //此时需要在body中添加一个节点即可。
        }

    </script>
</head>
<body>

</body>
</html>

其实，除了createElement之外，还可以创建文本等等……只要是节点都可以创建

e.g. 文本结点：createTextNode()

因此上面第10行的代码可以进行代替，以便更好地理解创建标签，文本，以及创建子节点

<script type="text/javascript">
        window.onload =function (){
     
     
            var DIYdiv=document.createElement("div");  //此时相当于<div> </div>
            var text=document.createTextNode("陆亿行-2021-01-14");
            DIYdiv.appendChild(text);  //DIYdiv.innerText=" ";
            document.body.appendChild(DIYdiv);
            //此时需要在body中添加一个节点即可。
        }
</script>

猜你喜欢

目录

热门文章