前端（五）DOM 文档对象模型_网页dom文档-CSDN博客

1.
const name = document.querySelector(‘CSS选择器’)
//(只获取匹配到的第一个元素，第一个HTML element对象)

//更多：
const li = document.querySelector(‘ul li:first-child’);//后代选择器

//选择所有的：
const li = document.querySelectorAll(‘ul li’);

//打印所有的li，以数组的形式。

//选择一个元素后可以修改。多个元素以数组形式出现，遍历修改。
2.
document.getElementById("id");//用ID获取对象，只能用在document上，查找一个
document.getElementByName("name属性值");
parent.getElementByTagName("tag");
//按标签名可以查找，控制台查看属性可以看到TagName
//可以查子代所有节点，返回一个伪数组，用下标取出元素

修改对象内容：

获取元素内容
修改文字内容：对象.innerText 属性：inner Text可以将文本添加/更新到任意标签位置，但只显示纯文本，不解析标签。//空格和换行会去掉。
.innerHTML属性：会解析标签，多标签建议用模版字符。

//注：取n-m的随机整数 

function getRandom(n,m){

return Marh.floor(Math.random()*(m-n+1))+N;

}

const random=getRandom(1,6);
//注：随机数：
const random = Math.floor(Math.random()*数组名.lenth);
random每次生成一个随机数本身是重新定义了初始值而不是改变原有的值，不算变量改变。（局部时以前的变量用完被回收）

1.3.2 操作元素属性：常用属性

获取属性：

//获取属性方法

1.样式属性：

style：对象.style.属性 =新值;生成行内样式，权重高。

如果属性有-连接符，需要转换为小驼峰命名法：borderTop:修改上边框，记得加单位。

类名：元素.className = ‘类名’

由于class是关键字，用className代替。（使用新值换旧值，如果需要添加一个类，要保留之前的类名。）

先通过CSS写出一个类，在通过js把类添加到属性里，调用。而且会把原有的类名覆盖。

如果前面类名和后加类名都用，引号中间写两个类名，空格隔开。

通过classList操作类：不覆盖，只追加/删除

元素.classList.add(‘类名不加点，而且是字符串’)

元素.classList.remove(同上)//删除

toggle()//切换：有就删掉，没有就加上

2.操作表单属性：

获取表单值：直接console.log(元素.value);

文本框变成密码框：元素.type = ‘password’;

设置全选按钮：1.获取元素 2.元素.checked = true（遍历，把每个都改成true，只接受布尔值）

按钮点击后失效：1.获取元素 2.disabled属性：禁用吗？默认false：不禁用。改成true即禁用。

3.操作自定义属性：

自定义属性：data-属性名：（HTML5中规定）

获取：

1.element.setAttribute("data-index",0);
2.元素名.dataset.属性名

目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中，使用起来会比较方便。

4.定时器：

间歇函数：定时器返回的是一个ID数字

开启：setInterval(函数（只写函数名，不加括号),间隔时间)作用：每隔一段时间调用这个函数，间隔时间单位是ms;执行到第一次打印有空窗期，空窗期为间隔时间。

关闭：因为每个定时器的序号都是独一无二的，需要let 对象名=获取

clearInterval（对象名）

再开：对象名 = setInterval(之前的数据)

button按钮特殊，用innerHTML获取元素。

1.4 事件监听：

1.4.1 事件：在编程时系统内发生的动作或者发生的事情。比如用户在网页内单击按钮。

事件监听：让程序检测是否有事件产生，一旦触发，就立即调用一个函数来响应。也称为绑定事件或注册事件。

语法：元素对象.addEventListener(‘事件类型’,要执行的函数)每次触发，每次执行。此种方法多次事件不会被覆盖。

事件监听三要素：事件源，事件类型，事件处理程序（调用的函数）。

事件源：那个dom元素被事件触发了，要获取dom元素

事件类型：用什么方式触发

1.4.2 事件类型：

鼠标事件：鼠标触发：click 鼠标点击 mouseenter鼠标经过 mouseleave鼠标离开

焦点事件：表单获得光标：focus 获得焦点 bur 失去焦点

键盘事件：键盘触发：keydown 键盘按下触发 keyup键盘抬起触发

文本事件：表单输入触发：input用户输入事件

1.4.3 事件对象：

里面有事件触发时的相关信息，可以判断用户键盘按下了那个键，鼠标点击了哪个按钮等。

语法：获取事件对象：在事件绑定的回调函数的第一个参数就是事件对象。

事件对象常用属性：type：获取当前事件类型 clientX/Y：获取光标相对于浏览器可见窗口左上角的位置。

offsetX/Y：获取光标相对于当前DOM元素左上角的位置。

key：用户按下键盘键的值。

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。

使代码更简洁。

this指向被调用者。谁调用，this就指谁。

函数调用方式不同，this指代对象也不同。

回调函数：如果函数作为调用参数被另一个函数调用，他就是回调函数。

1.4.4 事件流：

事件完整执行过程中的流动路径：事件捕获（从大到小）和事件冒泡（从小到大）

事件冒泡：当一个元素的事件被触发时，同样的事件会在该元素的所有祖先中依次被触发。（当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）

调用：事件监听第三个参数为false或者不添加此参数默认冒泡。

阻止冒泡：（大多数是默认冒泡存在导致影响到父级元素）把事件限制在当前元素内。

前提：拿到事件对象。

语法：事件对象.stopPropagation()

事件解绑：元素.removeEventListener(事件类型，事件处理函数名)匿名函数不能被解绑。

moreover与mouse enter的区别：

mouseover mouseout 有默认冒泡效果

mouseenter mouseleave 没有默认冒泡效果

事件委托：

优点：减少注册次数，提高程序性能

原理：事件委托利用冒泡事件的特点，给父元素注册事件，触发父元素时会冒泡到父元素身上，从而触发父元素事件

实现：事件对象.target.tagName可以获得真正触发事件的元素。

阻止默认行为的发生：比如阻止链接的跳转，表单域跳转

语法：e.preventDefault()

其他事件：

页面加载事件：

等到所有资源加载完毕以后执行事件，也可以针对某个资源绑定。事件名：load（监听页面所有资源加载完毕）

给window添加：window.load

当初始的HTML文档被完全加载和解析后，DOMContentLoaded事件触发，不需要等待样式表和图像等完全加载。

document.addEventListener(‘DOMContentLoaded’,function(){})

元素滚动事件：元素滚动时触发的事件。

事件名：scroll 给window或document添加

获取滚动位置：

scrollLeft和scrollTop（新版scrollY）:可读写

可以获得（滚动条向下拉，页面朝上走）朝上走的长度。

获取HTML元素：document.documentElement

相对于整个页面：document.documentElement.scrollTop

页面尺寸事件：在窗口尺寸改变时触发事件

属性：resize

检测屏幕尺寸：clientWidth clientHeight不包含边框boder，滚动条。包括padding。

获取元素位置，尺寸：

获取宽高：元素的自身宽高，padding，border。

属性名：offsetWidth和offsetHeight 包含边框。

获取位置：只读属性。获取元素距离自己定位的父级元素的左，上距离。

属性：offsetLeft和offsetTop。找父级元素，以定位的为准，父元素没有定位再往上找。

111,113,114,115，116，117，118;

1.5 DOM节点操作:

DOM节点：DOM树里的每一个内容都称为节点。

一般来说，节点至少有nodeType 节点类型，nodeName 节点名称，nodeValue 节点值这几个基本属性。

1.5.1 节点类型：

元素节点：所有的标签，html是根节点。

属性节点：所有的属性

文本节点：所有的文本

1.5.2 查找节点：

父节点查找：返回最近一级的父元素。子节点.parentNode。找不到则返回null。

子节点查找：

childNotes：获得所有子节点，包括文本节点（空格，换行），注释节点。

children属性：仅获得所有元素节点，返回的是一个伪数组。父元素.children。只获得下一级所有子元素。只读属性。

父元素.firstChild 返回第一个子节点。

父元素.lastChild 返回最后一个子节点。

兄弟关系查找：

下一个兄弟节点：nextElementSibling属性只选元素

上一个兄弟节点：previousElementSibling属性

1.5.4 增加节点：

先创造节点：即新创造一个元素，再添加到网页内。一般是先创建节点，再插入节点

方法：变量 = document.createElement(‘标签名’)

追加节点：父元素.appendChild(变量)//插入变成最后一个子元素。类似于伪元素。

插入到某个子元素前面：父元素.insertBefore(要插入的元素，第几个元素前面)

克隆节点：元素.cloneNode(布尔值)布尔值为true，克隆时包含后代节点（标签及内容等）。false：不包含。

默认为false。

删除节点：通过父元素删除。父元素.removeChild(要删除的元素)

如果不存在父子关系则不能删除。是从html里删除掉而非隐藏。

三种动态创建元素区别
1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
且innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高