Javascript学习笔记6 DOM扩展

客官°小女子只卖身不卖艺 2022-05-29 12:47 192阅读 0赞

## 选择符API ##

**querySelector()**  
接受一个CSS选择符，返回与**该模式匹配的第一个元素**，没有找到返回null

var mydiv = document.querySelector("#mydiv");

**querySelectorAll()**  
与`querySelector()`类似，不过**其返回所有匹配的元素，即一个NodeList**

var selecteds = document.querySelectorAll(".selected");

## 元素遍历 ##

返回元素节点，不用担心空白的文本节点

element.childElementCount  //返回子元素的个数，不包括文本和注释
    
    element.firstElementChild //指向第一个子元素
    
    element.lastElementChild //指向最后一个子元素
    
    element.previousElementSibling //指向前一个同胞元素
    
    element.nextElementSibling //指向后一个同胞元素

## HTML5 ##

**getElementsByClassName()**  
接受一个参数，即包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList

var a = document.getElementsByClassName("username current");

**classList**  
元素的类名列表，包含了一些方法用于更方便的操作类名

div.classList.add("disabled");  //添加类
    div.classList.remove("disabled");  //移除类
    div.classList.contains("bd");   //检查是否包含某类

**document.activeElement**  
返回当前获得焦点的元素，文档加载完毕时，是`<body>`元素

**document.readyState**  
返回文档的加载状态，`"loading"`或者`"complete"`

**document.charset**  
返回文档字符集，可以修改

document.charset = "UTF-8";

**innerHTML**  
返回元素所有子节点（包括元素，文本和注释）的HTML标记，可以修改(`<html>`,`<style>`,`<head>`以及表格元素等不支持)

div.innerHTML = "hello world";

**outerHTML**  
与`innerHTML`属性类似，但是其不仅返回子节点，还返回调用元素本身的HTML标记

**scrollIntoView()**  
通过滚动浏览器窗口或某个容器元素，使调用元素出现在视口中。如果传入true或不传参数，则元素顶部将会与视口顶部尽量平齐，如果传入false，那么元素将会尽可能地全部出现在视口中

doucument.forms[0].scrollIntoView();

**contains()**  
查找某个节点是不是另一个节点的后代，是则返回true，否则返回false

div.contains(someElement);

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript学习笔记（十四）DOM

DOM（下） DOM 就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点 DO

Bertha 。/ 2023年10月06日 15:43/ 0 赞/ 37 阅读

相关 JavaScript高程第三版笔记-DOM扩展

在那个刀耕火种的年代,用过jQuery的都体会到了jQuery带来的便捷,尤其是元素选择器. jQuery(www.jquery.com)的核心就是通过 CSS 选择符查询

缺乏、安全感/ 2023年08月17日 15:42/ 0 赞/ 129 阅读

相关 JavaScript学习笔记（DOM动画）

学习使用 JavaScript 来创建 HTML 动画。 -------------------- 动画 <style> container{

傷城~/ 2023年02月12日 13:23/ 0 赞/ 23 阅读

相关 JavaScript学习笔记（DOM-改变HTML）

HTML DOM 允许Javascript改变HTML元素的内容。改变 HTML 输出流 JavaScript 能够创建动态 HTML 内容： Tue May 2

客官°小女子只卖身不卖艺/ 2023年02月12日 12:20/ 0 赞/ 18 阅读

相关 Javascript学习笔记7 DOM2和DOM3

样式 style对象任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息（不包

àì夳堔傛蜴生んèń/ 2022年05月29日 13:05/ 0 赞/ 202 阅读

相关 Javascript学习笔记6 DOM扩展

选择符API querySelector() 接受一个CSS选择符，返回与该模式匹配的第一个元素，没有找到返回null var mydiv = docume

客官°小女子只卖身不卖艺/ 2022年05月29日 12:47/ 0 赞/ 193 阅读

相关 Javascript学习笔记5 DOM

DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构 Node类型所有的节点类型都继承自No

喜欢ヅ旅行/ 2022年05月29日 06:05/ 0 赞/ 259 阅读

相关 ES6学习笔记（函数扩展）

1.默认参数 function people({name,age = 30}={}) { console.log(name,age);

喜欢ヅ旅行/ 2022年05月17日 10:27/ 0 赞/ 252 阅读

相关 ES6学习笔记（字符串扩展）

1.模板字符串模板字符串的优点在于对长串的字符串进行处理时，不需要使用多个引号去进行处理，只需要在最外层使用间隔号\`，中间所有的变量使用$\{\}则可进行替换先

比眉伴天荒/ 2022年05月17日 09:23/ 0 赞/ 253 阅读

相关学习笔记——JavaScript操作DOM

DOM的核心对象 /\Document对象及其方法\/ 只有Document对象的方法可以在页面上查找、创建、删除元素查找一个或多个元素

缺乏、安全感/ 2022年03月19日 09:50/ 0 赞/ 301 阅读