JavaScript - DOM - Document对象

2023年5月5日 108次阅读 来源: 李威振

如安在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>
    原文作者：李威振
    原文地址: https://segmentfault.com/a/1190000016171477
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞