【JavaScript】DOM之Document对象
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>
相关推荐
luvhl 2020-08-17
liaoxuewu 2020-07-08
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
luvhl 2020-06-13
SIMONDOMAIN 2020-05-31
hyMiss 2020-05-19
liaoxuewu 2020-05-19
书虫媛 2020-05-15
liaoxuewu 2020-05-11
liaoxuewu 2020-05-10
小仙儿 2020-05-09
hyMiss 2020-05-01
liaoxuewu 2020-04-29
星星有所不知 2020-10-12