【JavaScript】DOM之Document对象

2023年11月20日 150次阅读 来源: 佐珥玎

JS(JavaScript)

一.Document对象

1.Document对象是什么

  • Document对象

是DOM的基础范例也是主要的对象之一，以接见，更新页面内容的属性和要领
经由过程conslie。log()要领来Document对象打印，测试该对象的属性和要领

<body>
<script>
    /*
        document对象
        * DOM预定义 - 已被建立终了了 - 许可直接运用
        * 获得的是HTML页面的源代码 - 该对象代表当前HTML页面
     */
    console.log(document);
    // document的确是一个JavaScript对象
    console.log(document instanceof Object);// true
    // document对象的属性和要领被定义在原型上
    console.log(Document.prototype);
    // 不再须要我们建立了
    var document = new Document();
    console.log(document);

</script>
</body>
  • 继续链关联
<body>
<script>
    // document对象是继续于Node的
    console.log(Document.prototype instanceof Node);
    // node对象是继续于EventTarget的
    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);
    // DOM中的对象之间的继续关联远比语法中的继续关联庞杂
    console.log(Document.prototype instanceof HTMLDocument);

</script>
</body>

2.定位页面元素

  • getElementById()要领

该属性特点是唯一不可反复

<body>
<button id="ben">按钮</button>
<div id="q1"></div>
<script>
    var buttonElement = document.getElementById('btn');
//    经由过程Document对象getElementById()要领定义元素
    console.log(buttonElement instanceof Object);//true
    /*
    * 打印测试效果-对应元素HTML代码
    * DOM是运用照样隧道都应该是对象
     */
    console.log(buttonElement instanceof HTMLButtonElement);
    /*
    * DOM供应一系列对象-对应HTML页面每一个元素
    * <button>元素都具有HTMLButtonElement对象
    * <div>元素都具有HTMLDivElement对象
     */
    var q1 = document.getElementById('q1');
    console.log(q1 instanceof HTMLDivElement);//true
</script>
</body>
  • getElementsByName()要领

name是参数示意定位元素name属性值
name属性不唯一 – 获得效果多是一个或多个

<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByName('btns');
//    name属性不唯一 - 获得效果多是一个或多个
    console.log(buttonElements[0]);
    console.log(buttonElements instanceof NodeList);//true
    /*NodeList鸠合-类数组对象
    * 获得每一个对应元素，经由过程索引值
     */
</script>
</body>
  • 节点鸠合NodeList
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var btnElements = document.getElementsByClassName('btns');
    console.log(btnElements);//HTMLCollection

/*    console.log(btnElements.length);//5
//    打印当前鸠合长度
    var btn = document.getElementById('btn');
//    删除当前鸠合中某个元素
    var body = document.body;
    body.removeChild(btn);
    console.log(btnElements.length);//4
//    再一次打印当前鸠合长度
 */
    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);//NodeList
    console.log(buttonElements.length);//5
    //    打印当前鸠合长度
    var btn = document.getElementById('btn');
    //    删除当前鸠合中某个元素
    var body = document.body;
    body.removeChild(btn);
    console.log(buttonElements.length);//5
    //    再一次打印当前鸠合长度
</script>
</body>
  • getElementsByTagName()要领

name是参数，示意定位元素的元素名
elements是返回值

<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByTagName('button');
//    HTMLCollection鸠合-类数组对象
    console.log(buttonElements[0]);
</script>
</body>
  • 定位元素元素属性
<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);
//    猎取到文件内容(boby)
    console.log(document.images);
//    猎取到页面一切的图片(images)
</script>
</body>
  • getElementsByClassName()要领

names是参数，示意定位元素的class属性值
names参数是可所以一个款式属性称号或多个款式属性称号

<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElement = document.getElementsByClassName('btns');
//    HTMLCollection鸠合-类数组对象
    console.log(buttonElements);
</script>
</body>
  • querySelector()要领

是经由过程CSS选择器定位第一个婚配元素
selectors是参数示意选择器以多个逗号分开，并包括一个或多个CSS选择器
element是返回值

<body>
<button id="btn">按钮</button>
<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('#btn');
    console.log(buttonElement1);
    //    要领返回是第个婚配元素
    var buttonElement2 = document.querySelector('.btns');
    console.log(buttonElement2);
    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);
    //    querySelectorAll()要领返回的是NodeList鸠合
</script>
</body>

3.建立页面元素

  • 建立元素节点

tagName是参数，示意建立元素节点
element是返回值

<body>
<script>
    var btn = document.createElement('button');
//    建立<button>元素
    var body = document.body;
//    猎取<body>元素
    body.appendChild(btn);
//    向<body>元素增加子节点
</script>
</body>
  • 建立文本节点

data是参数，示意文本节点的内容(字符串)
textNode是返回值

<body>
<script>
    var btn = document.createElement('button');
//    建立<button>元素
    var textNode = document.createTextNode('按钮');
//    建立文本节点
    btn.appendChild(textNode);
//    向<button>元素增填子节点
    var body = document.body;
//    猎取<body>元素
    body.appendChild(btn);
//    向<body>元素增加字节点
</script>
</body>
  • 建立属性节点

name是参数是指属性节点的称号
attributeNode是返回值

<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);

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

</script>
</body>
    原文作者：佐珥玎
    原文地址: https://segmentfault.com/a/1190000016171115
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞