JavaScript DOM模型 及 get.. 方法

最新推荐文章于 2023-05-15 10:52:33 发布
最新推荐文章于 2023-05-15 10:52:33 发布
阅读量187 收藏
点赞数
分类专栏： web js 文章标签： javascript css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45146250/article/details/113495033
版权
web 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

JavaScript DOM模型 及 get... 方法 

1、DOM模型

2、createElement 方法

3、document 对象三个查询方法的使用注意事项

4、getElementById 方法

5、getElementsByName 方法

6、getElementsByTagName 方法

7、节点的常用属性和方法

1、DOM模型 

DOM 的全称是 Document Object Model 文档对象模型
    ==>就是把文档中的标签，属性，文本，转化成为对象来管理。

    1、Document 对象
         Document 对象的理解：
            1、Document 它管理了所有Html文档内容。
            2、document 它是一种数结构的文档。有层级关系。
            3、它让我们把所有的标签 都 对象化
            4、我们可以通过document 访问所有的标签对象

2、createElement 方法

 <script type="text/javascript">
        window.onload =  function () {
            // 现在让我们使用js代码来创建html标签，并显示在页面上
            // 标签的内容就是：<div>this is my major</div>
            var divObj = document.createElement("div"); //在内存中<div></div>

            var textObj = document.createTextNode("Java、PHP、C#"); //有一个文本节点对象 #Java、PHP、C#
            divObj.appendChild(textObj);
            //divObj.innerHTML = "this is my major";  //<div>this is my major</div>，还只是在内存中
            //添加子元素
            document.body.appendChild(divObj);  //document.body 要在页面加载完成使用
        }
    </script>

 

 

3、document 对象三个查询方法的使用注意事项

 

document 对象的三个查询方法，如果有 id属性，优先使用getEleMENTById方法来进行查询
* 如果没有id 属性，则优先使用getElementsByName 方法来进行查询
* 如果id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
*
* 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">
        /***
         * document 对象的三个查询方法，如果有 id属性，优先使用getEleMENTById方法来进行查询
         * 如果没有id 属性，则优先使用getElementsByName 方法来进行查询
         * 如果id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
         *
         * 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象
          */
        alert(document.getElementById("btn01"))
        function checkAll() {
            alert(document.getElementById("btn01"))
            // document.getElementsByTagName("input"); 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序，是它们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" value="PHP" checked="checked">PHP
    <input type="checkbox" value="Java">Java
    <input type="checkbox" value="C++">C++
    <input type="checkbox" value="Python">Python
    <br>
    <button id="btn01" onclick="checkAll()">全选</button>
</body>
</html>

 

 

4、getElementById 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求：当用户点击了校验按钮，要获取输入框里的内容。
         * 然后验证其是否合法
         * 验证规则是：必须由字母，数字，下划线组成，并且长度是5到12位
         */
        function onclickFun() {
            //1、当我们要操作一个标签的时候，一定要先获取这个标签对象
            var name = document.getElementById("username")
            //[object HTMLInputElement] 它就是dom对象
            //alert(name.value);  //获取输入框的内容
            var usernameTest = name.value;  //获取输入框的内容
            //如何验证 字符串 符合某个规则，需要使用正则表达式
            var patt = /^\w{5,12}$/;
            /***
             * test() 方法用于测试某个字符串，是不是匹配我的规则
             * 匹配就返回 true，不匹配就返回 false
             */
            var spanObj = document.getElementById("span");
            //innerHTML 表示起始标签和结束标签中的内容
            //innerHTML 这个属性可读，可写。可赋值
            //alert(spanObj.innerHTML);

            if(patt.test(usernameTest)){
                //alert("用户名合法！！");
                //spanObj.innerHTML = "用户名合法！！";
                spanObj.innerHTML = "<img src=\"../../imgs/true.jpg\" width=\"25\" height=\"25\">";
            }else{
                //alert("用户名不合法！！");
                //spanObj.innerHTML = "用户名不合法！！";
                spanObj.innerHTML = "<img src=\"../../imgs/false.jpg\" width=\"25\" height=\"25\">";
            }
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" value="wzx">
    <span style="color: red" id="span">

    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

 

5、getElementsByName 方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选 方法
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName(); 是根据 指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组一样
            // 集合中每个元素都是dom对象
            //  这个集合中的元素顺序是它们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // alert(hobbies[2].value);
            // checked 表示复选框的选中状态，如果选中是true，不选中是false
            // checked 这个属性可读，可写
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }

        }
        //全不选 方法
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        //反选 方法
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked  = !hobbies[i].checked;

                // if(hobbies[i].checked){
                //     hobbies[i].checked  = false;
                // }else{
                //     hobbies[i].checked = true;
                // }
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="PHP" checked="checked">PHP
    <input type="checkbox" name="hobby" value="Java">Java
    <input type="checkbox" name="hobby" value="C++">C++
    <input type="checkbox" name="hobby" value="Python">Python
    <br>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

 

 

6、getElementsByTagName 方法  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
            // document.getElementsByTagName("input"); 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序，是它们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" value="PHP" checked="checked">PHP
    <input type="checkbox" value="Java">Java
    <input type="checkbox" value="C++">C++
    <input type="checkbox" value="Python">Python
    <br>
    <button onclick="checkAll()">全选</button>
</body>
</html>

 

 7、节点的常用属性和方法

 

节点就是标签对象
* 方法：
*      通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
*  appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
*
*  属性：
*      childNodes 属性，获取当前节点的所有子节点
*      firstChild 属性，获取当前节点的第一个子节点
*      lastChild 属性，获取当前节点的最后一个子节点
*      parentNode 属性，获取当前节点的父节点
*      nextSibling 属性，获取当前节点下一个节点
*      previousSibling 属性，获取当前节点的上一个节点
*      className 用于获取或设置标签的class属性值
*      innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
*      innerText 属性，表示获取/设置起始标签和结束标签中的文本

例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/dom.css">
    <script type="text/javascript">
        /**
         * 节点就是标签对象
         * 方法：
         *      通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
         *  appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
         *
         *  属性：
         *      childNodes 属性，获取当前节点的所有子节点
         *      firstChild 属性，获取当前节点的第一个子节点
         *      lastChild 属性，获取当前节点的最后一个子节点
         *      parentNode 属性，获取当前节点的父节点
         *      nextSibling 属性，获取当前节点下一个节点
         *      previousSibling 属性，获取当前节点的上一个节点
         *      className 用于获取或设置标签的class属性值
         *      innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
         *      innerText 属性，表示获取/设置起始标签和结束标签中的文本
         */
        window.onload = function () {
            //1、查找#bj节点
            document.getElementById("btn01").onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML);
            }
            //2、查找所有li节点
            document.getElementById("btn02").onclick = function () {
                var lis = document.getElementsByTagName("li");
                alert(lis.length);
            }
            //3、查找name=gender的所有节点
            document.getElementById("btn03").onclick = function () {
                //var genders = document.getElementsByName("gender")[1].value;  //获取具体值
                var genders = document.getElementsByName("gender");
                alert(genders.length);
            }
            //4、查找#city下所有的li节点
            document.getElementById("btn04").onclick =  function () {
                //1、获取id为city的节点
                //2、通过city节点，getElementsTagName按标签名查找子节点
               var lis = document.getElementById("city").getElementsByTagName("li")
               alert(lis.length);
            }
            //5、返回#city的所有子节点
            document.getElementById("btn05").onclick =  function () {
                //1、获取id为city的节点
                //2、通过city获取所有节点
                var childnode = document.getElementById("city").childNodes.length;
                alert(childnode);
            }
            //6、返回#phone的第一个子节点
            document.getElementById("btn06").onclick =  function () {
                var firstn = document.getElementById("phone").firstChild.innerHTML;
                alert(firstn);
            }
            //7、返回#bj的父节点
            document.getElementById("btn07").onclick =  function () {
                //1、查找id为bj的节点
                //2、bj节点获取父节点
                var parentnode = document.getElementById("bj").parentNode.innerText;//innerHTML也可以
                alert(parentnode);
            }
            //8、返回#android的前一个兄弟节点
            document.getElementById("btn08").onclick =  function () {
                //1、获取id为android的节点
                //2、通过android节点获取前面兄弟节点
                alert(document.getElementById("android").previousSibling.innerHTML)
            }
            //9、返回#username的vaule属性
            document.getElementById("btn09").onclick =  function () {
                alert(document.getElementById("username").value);
            }
            //10、设置#username的value属性值
            document.getElementById("btn10").onclick =  function () {
                document.getElementById("username").value = "爱新觉罗.弟弟";
            }
            //11、返回#bj的文本值
            document.getElementById("btn11").onclick =  function () {
                //alert(document.getElementById("bj").innerHTML);
                alert(document.getElementById("bj").innerText);
            }
        }
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢那个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢那款单击游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br>
        <br>

        <p>
            你手机操作系统是？
        </p>

        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>

    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female">
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有的li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的vaule属性</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
#total{
    width: 500px;
    height: 600px;
    /*border: 1px solid black;*/
    float: left;
    position: absolute;
    left: 0px;
    top: 10px;
    margin-left: 50px;
}

p{
    position: relative;
    left: 20px;
}

#city ul{
    list-style: none;
    margin-left: 20px;
    width: 200px;
}
#city li{
    text-align: center;
    padding-top: 3px;
    display: block;
    width: 40px;
    float: left;
    border: 1px solid black;
    margin-left: 10px;
    background-color: chartreuse;
}
#game ul{
    list-style: none;
    margin-left: 30px;
    width: 200px;
}
#game li{
    text-align: center;
    padding-top: 3px;
    display: block;
    width: 67px;
    float: left;
    border: 1px solid black;
    margin-left: 10px;
    background-color: chartreuse;
}
#phone ul{
    list-style: none;
    margin-left: 30px;
    width: 300px;
}
#phone li{
    text-align: center;
    padding-top: 3px;
    display: block;
    width: 120px;
    float: left;
    border: 1px solid black;
    margin-left: 10px;
    background-color: chartreuse;
}
.inner{
    width: 480px;
    float: left;
    border: 1px solid black;
    margin-top: 30px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}
#btnList{
    left: 600px;
    top: 10px;
    position: absolute;
    float: left;
    margin-top: 25px;
}
#btn01,#btn02,#btn03,#btn04,#btn05,#btn06,#btn07,#btn08,#btn09,#btn10,#btn11{
    width: 300px;
    height: 25px;
    margin-top: 10px;
    background-color: azure;
    font-family: 华文仿宋;
    font-weight: bolder;
}

胖大师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML DOM（文档对象模型）
weixin_52563771的博客
05-22 338
HTML DOM（文档对象模型）一、DOM简介二、DOM树DOM方法四、获取标签元素通过 id 查找 HTML 元素通过标签名查找 HTML 元素通过类名查找 HTML 元素通过 CSS 选择器查找 HTML 元素获取body元素获取html元素五、DOM事件六、修改元素内容七、修改元素样式属性八、节点操作节点层级关系创建与添加元素节点(先创建在添加元素)删除节点 一、DOM简介 文档对象模型（Document Object Model），是W3C标准中课处理可扩展标记语言（HTML、XML）的标准编程接
MySQL数据库期末考试试题及参考答案(01)
谷哥的小弟
11-15 1万+
SQL在20世纪80年代被美国国家标准学会和国际标准化组织定义为关系型数据库语言的标准
17.模型的定义
qq_34820433的博客
05-15 393
12. 默认读取 database.php 配置的数据库连接，也可以在模型端局部更改；3. 而调用的时候，我们也知道表名要遵循它默认规则，修改为复数，或特定；1. 之前在查询构造器部分，把常用的数据库操作基本讲完，模型大体相同；4. 虽然安装了插件，但模型还是没有代码提示，可以通过安装插件解决；5. 其它查询方法基本和查询构造器一样，如果有不一样，参考错误提示；4. 系统假定你的主键为 id，如果你要修改默认主键，可以特定；2. 比如，我们要查询所有数据，直接使用模型::all()即可；
ThinkPHP--模型
新新新新新的博客
04-23 559
查询 模型中的查询的数据在获取的时候会经过获取器的处理，以及更加对象化的获取方式。 模型查询的最佳实践原则是：在模型外部使用静态方法进行查询，内部使用动态方法查询，包括使用数据库的查询构造器。模型的查询始终返回对象实例，但可以和数组一样使用。 获取单个数据 // 取出主键为1的数据 $user = User::get(1); echo $user->name; // 使用查询构造器查询满足条件的数据 $user = User::where('name', 'thinkphp')-&gt
JS操作dom元素（一）——获取DOM节点的六种方式
weixin_44867717的博客
07-06 5750
dom元素
Javascript考试题目选择题.docx
07-09
本文档是一个 Javascript 考试题目选择题的文档，涵盖了 Javascript 的基本概念、语法、控件、事件处理、DOM 模型等多个方面。下面是根据文档的内容生成的相关知识点： 一、Javascript 基本概念 * Javascript 语法...
JavaScript DOM编程艺术(中文第2版)
09-26
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
人机交互JavaScript框架Cycle.js.zip
07-18
DOM: responses.DOM.get('.field', 'input')  .map(ev => ev.target.value)  .startWith('')  .map(name =>  h('div', [  h('label.label', 'Name:'),  h('input.field', {attributes: {type: 'text...
《JavaScript DOM 编程艺术》读书笔记之DOM基础
12-12
 DOM：文档对象模型； 节点  元素节点：DOM的原子是元素节点。<body>、、之类的元素。元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素  文本节点：在XHTML文档里，文本节点...
前端开发面试题含答案.pdf
07-14
5. CSS 基本功：布局、盒子模型、选择器优先级及使用 6. HTML5 7. CSS3 DOM 结构和操作方面： 1. 两个节点之间可能存在哪些关系 2. 如何在节点之间任意移动 3. 如何添加、移除、移动、复制、创建和查找节点等 ...
原生JS-DOM操作获取元素的四种方法
世界和我们都不该止步于此
04-14 6418
目录 一.getElementById获取元素 二.getElementsByTagName()获取元素 三.HTML5新增方法获取元素 四.获取body、html元素 一.getElementById获取元素 这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象 我们来举一个例子： <div id='hello-JS'>你好JS</div> 这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过get.
JS获取DOM节点的六种方式
qq_45829293的博客
03-05 4162
JS获取DOM节点1、getElementById() --- id选中元素2、getElementByClassName() --- 类名选中元素3、getElementByTagName() --- 标签名选中元素4、querySelector和queryselectorAll4-1 querySelector() --- 精准的获取某个元素4-2 queryselectorAll() --- 获取符合类名或者标签名等条件的的所有元素5、getElementByName --- 通过name属性获取元素
js 获取dom元素的八种方法
技术的搬运工
03-28 1万+
1、通过css选择器获取一个元素（querySelector）2、通过选择器获取一组元素（querySelectorAll）方法一样，只是可以获取css选择器匹配的。如果你需要返回所有的元素，请使用。方法仅仅返回匹配指定选择器的。
js DOM
weixin_30438813的博客
06-18 134
DOM 是 Document Object Model（文档对象模型）的缩写。（BOM 浏览器对象模型）； 任意的文档都可以绘制成树状结构 docunment就是一个对象，这个对象指代的是这个文档 document对象底下有一些方法，这些方法可以获取到某个或者某一组元素节点 　　　　1.document.getElementById('id')　　通过元素的id属性，获取到这个元素（...
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
JS获取DOM元素的方法（8种）
NLoudly的博客
06-07 1757
JS获取DOM元素的方法（8种） JS获取DOM元素的方法（8种）) JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 通过选择器获取一个元素（querySelector） 通过选择器获取一组元素（querySelectorAll） 获取html的方法（document.documentElement） do
原生JS获取高度方法，去除padding、border、margin
hapyss的博客
10-18 8141
一、常规知识： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWi...
JS 获取DOM节点宽高与绝对位置
xiaobai_f的博客
03-26 4299
原生JS提供了一个getBoundingClientRect()方法，用于获取左，上，右和下分别相对浏览器视窗的位置。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。...
JS获取Model层数据
qq_28053177的博客
12-15 9208
Controller :request.setAttribute("yearList", yearList);或者 model.addAttribute("yearList", yearList);在JS中:<%=request.getAttribute("yearList")%>
vue three.js 获取模型的大小并自动计算缩放比例
最新发布
09-05
在Vue项目中使用Three.js获取模型的大小并自动计算缩放比例的方法如下： 1. 导入Three.js库和模型文件。在Vue项目中，可以通过npm安装Three.js，并在需要使用的组件中引入。 ```javascript import * as THREE from ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值