JavaScript - DOM - Document对象

头像
李威振
    阅读 7 分钟

    如何在HTML使用JavaScript

    <script>元素用于在HTML中引用或嵌套JavaScript脚本代码，该元素默认被定义在<head>元素中。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script> </script>元素
         作用 - 引入脚本语言
         属性
           src - 指定js文件路径
           type=''text/javascript -（新）表示当前使用的是js语言
           language=''javascript - (旧) 表示当前使用的是js语言
      -->
    <script src="js.js" type="text/javascript" language="JavaScript">
        //浏览器加载完毕在执行指定代码
        window.onload = function () {
            //js编码写在这里
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>
<!--考虑到代码执行的顺序，js代码写到HTML后面
     也可以使用windon.onload  解决顺序问题
     js语言写在HTML页面，没有实现有效分离-->
<script>console.log('这是一段js代码')</script>
</body>
</html>

    DOM

    DOM是什么

    • DOM是Document Object Model的缩写，译为文档对象模型
    • DOM是一个独立于任何语言和平台的接口，允许任何语言或者脚本动态的访问和更新HTML文档的内容、- 结构和样式。该HTML页面会进一步处理，并且该处理的结果可以被合并到呈现的HTML页面中。
    • DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。

    Document对象

    Document对象是什么

    Document对象时DOM中标准规范中比较重要的对象之一，该对象提供了访问和更新HTML页面内容的属性和方法。Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*   documeng对象
    *  DOM预定义 - 可以直接使用
    *  得到的是HTML页面的源代码，该对象代表HTML页面*/
    console.log(document);
    /*确认document是一个对象*/
    console.log(document instanceof Object);//true
    /*document对象的属性和方法被定义在原型上*/
    console.log(Document.prototype);
    //不需要再创建
    var document = new Document();
    console.log(document);
</script>
</body>
</html>

    document对象的继承链

    Document对象是继承于Node对象的，Node对象也是DOM标准规范中非常重要而的对象之一，Node对象又是继承于EventTarge对象。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //document对象时继承与Node的
    console.log(document.prototype instanceof Node);//true
    //Node对象是继承于EventTarget
    console.log(Node.prototype instanceof EventTarget);//true
    //document继承于EventTarget
    console.log(document.prototype instanceof EventTarget);//true
</script>
</body>
</html>

    定位页面元素

    Document对象提供了属性和方法实现页面元素定位功能，这也是DOM规范中Document对象的主要应用之一。
    Document对象提供实现页面元素定位的方法具有以下几种：

    • getElementById()方法：通过页面元素的id属性值定位元素
    • getElementsByName()方法：通过页面的name属性定位元素
    • getElementsByTagName()方法：通过页面元素的元素名定位元素
    • getElementsByClassName()方法：通过页面元素的class属性值定位元素
    • querySelector()方法：通过CSS选择器定位第一个匹配的元素
    • querySelectorAll()方法：通过CSS选择器定位所有匹配的元素

    getElementById()方法

    由于id属性是唯一的，所以通过这种方法定位的HTML元素也是唯一的

    <body>
<button id="btn">按钮</button>
<script>
    //使用getElementById()方法定位元素
    var button = document.getElementById('btn');
    //DOM无论是使用的还是得到的都应该是对象
    console.log(button instanceof Object);//true
    /* DOM提供了一系列对象 - 对应HTML的每一个元素
    *  <button>具有 HTMLButtonElementd 对象
    *  元素的对象名格式  HTML元素名Element
    *  <div>具有 HTMLDivElement对象*/
</script>
</body>

    getElementsByName()方法

    <body>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<script>
    //通过getElementByName()方法定位元素
    //name属性不唯一，得到的结果可能是多个，也可能是一个
    var buttonElements = document.getElementsByName('btn');
    /*  NodeList集合 - 类数组对象
    *   通过索引值得到每一个元素*/
    console.log(buttonElements[0]);
    console.log(buttonElements instanceof NodeList);//true
</script>
</body>

    getElementsByGayName()方法

    <body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
    //通过getElementsByTagNamr()方法定位元素
    var buttonElements = document.getElementsByTagName('button');
    //HTMLCollection集合 - 类数组对象
    console.log(buttonElements[0])
    console.log(buttonElements instanceof HTMLCollection);//true
</script>
</body>

    getElementsByClassName()方法

    <body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByClassName('btns');
    //HTMLCollection集合 - 类数组对象
    console.log(buttonElements[1]);
</script>
</body>

    CSS选择器定位元素

    <body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    //该方法返回的是第一个匹配的元素
    //多个选择器之间用逗号分隔
    var buttonElement1 = document.querySelector('.btns');
    console.log(buttonElement1);
    //该方法返回的是所有匹配元素的集合 - NodeList集合
    //多个选择器之间用逗号分隔
    var buttonElement2 = document.querySelectorAll('.btns');
    console.log(buttonElement2);
</script>
</body>

    节点集合NodeList

    NodeList是一组元素节点的集合，每个节点具有索引值（从0开始，类似于数组），分为动态和静态两种

    • 动态NodeList：如果文档中的节点树发生变化，则已存在的NodeList对象也发生变变化

    getElementsByByName
    getElementsByTagName
    getElementsByClassName

    • 静态NodeList：文档对象模型的任何改变都不会影响集合的内容
    <body>
<button class="btns" id="btn"></button>
<button class="btns"></button>
<button class="btns"></button>
<button class="btns"></button>
<script>
   /* //动态集合
    var buttonElents = document.getElementsByClassName('btns');
    //集合的长度
    console.log(buttonElents.length);//4
    //删除集合中一个元素
    var btn = document.getElementById('btn');//定位一个元素
    document.body.removeChild(btn);//删除定位的元素
    console.log(buttonElents.length);//3*/

    //静态集合
    var btnElement = document.querySelectorAll('.btns');
    //结合的长度
    console.log(btnElement.length);//4
    //删除集合中的一个元素
   var btn = document.getElementById('btn');//定位一个元素
   document.body.removeChild(btn);//删除定位的元素
   console.log(btnElement.length);//4*/
</script>
</body>

    定位页面的元素属性

    Document对象提供了一些属性，定位HTML页面的比较特殊的元素

    <body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    console.log(document.documentElement);// <html>
    console.log(document.head);// <head>
    console.log(document.body);// <body>

    console.log(document.images);// <image>
//循环遍历图片元素
    var images = document.images;
    for (var i=0; i<images.length; i++) {
        var img = images[i];
        console.log(img.src);
    }

</script>
</body>

    创建也变元素

    创建元素节点

    Document对象提供了createElement()方法创建元素节点

    <body>
<script>
    // 1.创建<button></button>元素
    var btn = document.createElement('button');
    // 2.获取<body>元素
    var body = document.body;
    // 3.向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>

    创建文本节点

    Document对象提供了createTextNode()方法创建文本节点

    <body>
<script>
    // 1.创建<button></button>元素节点
    var btn = document.createElement('button');

    // 2.创建文本节点
    var textNode = document.createTextNode('按钮');
    // 3.向<button>元素添加子节点
    btn.appendChild(textNode);

    // 4.获取<body>元素
    var body = document.body;
    // 5.向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>

    创建属性节点

    Document对象提供了createAtrribute()方法创建属性节点

    <body>
<script>
    // 1.创建<button></button>元素节点
    var btn = document.createElement('button');

    // 2.创建文本节点
    var textNode = document.createTextNode('按钮');
    // 3.向<button>元素添加子节点
    btn.appendChild(textNode);

    // 4.创建属性节点
    var attrNode = document.createAttribute('id');
    // 5.为属性节点设置值
    attrNode.nodeValue = 'btn';
    // 6.为<button>元素设置属性节点
    btn.setAttributeNode(attrNode);

    // 7.获取<body>元素
    var body = document.body;
    // 8.向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>
    javascript
    李威振
    16 声望5 粉丝

    别离时方知此世间，花亦花来人亦人

    « 上一篇
    javascript - 严格模式
    下一篇 »
    Node对象的一些方法

    引用和评论

    推荐阅读
    头像
    DOM - 表单操作

    李威振阅读 1.7k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新