示例代码:node
<script> /* document对象 * DOM预约义 - 已经被建立完毕了 - 容许直接使用 * 获得的是HTML页面的源代码 - 该对象表示当前HTML页面 */ console.log(document); // 利用instanceof来判断document是不是一个对象 console.log(document instanceof Object);// 调用结果为true 表示document是一个JavaScript对象 // document对象的属性和方法被定义在原型上 console.log(Document.prototype); /* 使用构造函数的方法建立一个对象 * 缘由 - DOM底层已经编写好了因此不须要咱们再去建立了能够直接使用 */ var document = new Document(); console.log(document); </script>
<script> // 利用instanceof判断Document.prototype(对象原型)是否继承于Node console.log(Document.prototype instanceof Node);// 调用结果为 true因此document对象是继承于Node的 // node对象是继承于EventTarget的 (EventTarget目标时间的意思) console.log(Node.prototype instanceof EventTarget); console.log(Document.prototype instanceof EventTarget); // DOM中的对象之间的继承关系远比语法中的继承关系复杂 console.log(Document.prototype instanceof HTMLDocument); </script>
示例代码:数组
<body> <button id="btn">哒哒哒</button> <div id="d1"></div> <script> // 1. 经过Document对象的getElementById()方法定义元素 var buttonElement = document.getElementById('btn'); /* * 打印测试的结果 - 是对应元素的HTML代码 * DOM不管是使用的仍是获得的都应该是对象 */ console.log(buttonElement instanceof Object);// 调用结果为 true /* DOM提供了一系列的对象 - 对应HTML页面的每个元素 * <button> 元素对应具备HTMLButtonElement对象 * <div> 元素对应具备HTMLDivElement对象 */ console.log(buttonElement instanceof HTMLButtonElement);// 调用结果为 true var d1 = document.getElementById('d1'); console.log(d1 instanceof HTMLDivElement);// 调用结果为 true </script> </body>
示例代码:app
<body> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <button name="btns">哒哒哒</button> <script> // name属性不是惟一 - 获得的结果多是多个,也多是一个 var buttonElements = document.getElementsByName('btns'); /* NodeList集合 - 类数组对象 * 获得每个对应元素的话 - 经过索引值 */ // 经过索引值获得指定的name属性 console.log(buttonElements[4]); // 判断buttonElements是不是节点列表 console.log(buttonElements instanceof NodeList);// 调用结果为 true </script> </body>
示例代码:函数
<body> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <button class="btns">哒哒哒</button> <script> var buttens = document.getElementsByClassName('btns'); /* getElementsByClassName()方法 * 以查找 class属性值 的方式来定位指定元素的位置 * 会获得所有带有 class属性 的元素,以类数组表示获得的元素( HTMLCollection类型 ) */ console.log(buttens); </script>
示例代码:测试
<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 buttons = document.querySelector('#btn'); console.log(buttons); var buttons1 = document.querySelector('.btns'); console.log(buttons1); // querySelectorAll()方法返回的NodeList集合 var buttons2 = document.querySelectorAll('btns'); console.log(buttons2); </script> </body>
动态集合与静态集合prototype
动态集合(HTMLCollection) - 根据HTML元素变化而变化code
静态集合(NodeList) - 不会根据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> /* 动态集合与静态集合 * 动态集合(HTMLCollection) - 根据HTML元素变化而变化 * 该集合的length属性值是变化的 - 影响后续的操做 * 静态集合(NodeList) - 不会根据HTML元素变化而变化 * 若是执行删除操做 - 该集合中可能存在已不存在的元素 */ 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>
示例代码:索引
<script> // 1.建立<button></button>元素 var btn = document.createElement('button'); // 2.获取<body>元素 var body = document.body; // 3.向<body>元素添加子节点 body.appendChild(btn); </script>
示例代码:
<script> // 建立<button></button>元素 var btn = document.createElement('button'); /* 建立文本节点 为新建立的元素节点添加文本节点 */ var textNode = document.createTextNode('按钮'); /* 向<button>元素添加子节点 */ btn.appendChild(textNode); // 获取<body>元素 var body = document.body; /* 向<body>元素添加子节点 将建立的文本节点添加到指定的元素节点中 - 经过appendChild()方法进行添加 */ body.appendChild(btn); </script> </body>
示例代码:
<body> <script> // 建立<button></button>元素 var btn = document.createElement('button'); /* 建立文本节点 - 为新建立的元素节点添加文本节点 */ var textNode = document.createTextNode('按钮'); // 向<button>元素添加子节点 btn.appendChild(textNode); // 建立属性节点 - 为新建立的元素节点添加属性节点 var attrNode = document.createAttribute('id'); // 为属性节点设置值 attrNode.nodeValue = 'btn'; // 为<button>元素设置属性节点 btn.setAttributeNode(attrNode); // 获取<body>元素 var body = document.body; // 向<body>元素添加子节点 body.appendChild(btn); </script> </body>