顺德做网站,互联网品牌推广,wordpress访问过的页码不变色,注册微信号的网站目录
1.API 和 Web API
2.DOM导读
DOM树
3.获取元素
getElementById获取元素
getElementsByTagName获取元素
H5新增方法获取
获取特殊元素
4.事件基础
执行事件
操作元素
修改表单属性
修改样式属性
使用className修改样式属性
获取属性的值
设置属性的值
移除…目录
1.API 和 Web API
2.DOM导读
DOM树
3.获取元素
getElementById获取元素
getElementsByTagName获取元素
H5新增方法获取
获取特殊元素
4.事件基础
执行事件
操作元素
修改表单属性
修改样式属性
使用className修改样式属性
获取属性的值
设置属性的值
移除属性值
H5自定义属性
5.节点操作
节点概述
节点层级
父级节点
子级节点
兄弟节点
添加节点
删除节点
复制节点
三种动态元素创建区别 1.API 和 Web API 2.DOM导读 DOM树 3.获取元素
getElementById获取元素
文档页面从上往下加载先有标签将script写到标签的下面
var 变量名document.getElementById(参数)
返回的类型是元素对象object div idtime2019-9-9/div
使用console.dir(变量名) 可以查看里面的属性和方法 getElementsByTagName获取元素
根据标签名获取
var listdocument.getElementsByTagName(标签名)
返回的是一个集合想要得到里面的元素需要用for循环遍历
得到的元素对象是动态的 获取某个元素父元素内部所有指定标签名的子元素
element.getElementsByTagName(标签名)
父元素必须是单个对象 想要得到ol中的li有两种方法
var oldocument.getElementsByTagName(li)
console.log(ol[0].getElementsByTagName(li))
或者是 在写ol时直接给ol的标签中命名一个id(下面命名的id是ol)
var oldocument.getElementsByTagName(ol)
console.log(ol.getElementsByTagName(li)) H5新增方法获取
document.getElementsByClassName(类名) 根据类名返回元素对象集合
document.querySelector(选择器) 根据指定选择器返回第一个元素对象其中类选择器要加.如.box而id选择器要加#如#nav
document.querySelectorAll(选择器) 返回指定选择器的所有元素对象集合 获取特殊元素
获取body元素 document.body
获取html元素 document.documentElement 4.事件基础
执行事件
事件是由三部分组成事件源、事件类型、事件处理程序也将它们成为事件三要素
事件源 事件被触发的对象 如按钮
事件类型 如何触发什么事件 如点击鼠标或者鼠标经过等
事件处理程序 通过一个函数赋值的方法来完成 事件类型即如何触发 操作元素
这两个方法可以在触发时改变原先的内容
element.innerText 不会注意html标签它会把空格和换行也去掉
element.innerHTML 注意html标签会保留空格和换行 修改表单属性
input typetext value输入内容
想要点击按钮文本框的内容发生变化用input.value
想要某个表单被禁用就是点击过一次后不能再点击用 按钮名.disabledtrue 或者 this.disabledtrue,这里的this指向的是事件函数的调用者 修改样式属性
采取驼峰命名法注意第二个单词首字母要大写它形成的是行内样式权重高 仿淘宝关闭二维码图
触发时间的开关是点击图片叉号关闭整个二维码运用到了隐藏的设置display:none在设置元素的样式时一般不用写出来默认是display:block
另外就是要注意this的用法this指向的是事件函数的调用者在此处事件函数的调用者是btn所以不能写this.style.display 使用className修改样式属性
当触发事件时要修改的元素样式太多可以现在style中写一个新的类把想要的元素样式写进去之后在script中利用className‘新类名’来改变样式
后面的类名会覆盖掉原先的类名 获取属性的值
element.属性 获取属性值 获取的是内置属性值即元素本身自带的属性
element.getAttribute(’属性‘) 获得的是程序员自定义的属性 设置属性的值
element.属性值 设置内置属性值
element.setAttribute(属性值) 设置自定义的属性
div.classNamebg div.setsetAttribute(class,bg) 这里写的是class而不是className 移除属性值
element.removeAttribute(属性) H5自定义属性
设置H5自定义属性
H5规定自定义属性以data-开头作为属性名并且赋值 dic data-index1index
或者就是使用setAttribute element.setAttribute(data-index,2) 获取H5自定义属性
第一种就是常用的 element.getAttribute(data-index)
H5新增的获取方法只能获取data-开头的 div,dataset.属性名 或者 div.dataset[属性名]
dataset是一个存放了所有以data开头的自定义属性的集合
当自定义属性中有多个使用‘-’连接的单词在获取时可以采用驼峰命名法 5.节点操作
节点概述 节点层级
父级节点
node.parentNode
该属性可返回某节点的父节点是离该元素最近的一个父节点没有的话则返回null 子级节点
使用parentNode.childNodes 返回值中包含了元素节点、文本节点不精确
使用parentNode.children 值返回子元素节点 第一个和最后一个子元素
firstChild 第一个子节点会获得文本节点
firstElementChild 可以返回第一个元素节点但有兼容性问题
children[] 实用利用数组的概念最后一个元素索引是ol.children.length-1 兄弟节点
node.nextSibling 返回当前元素的下一个兄弟节点找不到则返回null包括文本节点
node.previousSibling 返回当前元素的上一个兄弟节点找不到则返回true包括文本节点
node.nextElementSibling 返回当前元素的下一个兄弟节点
node.previousElementSibling 添加节点
添加节点是先创建再添加 var 新名document.createElement(类型)
node.appendChild(child) 将一个节点添加到指定父节点的子节点列表中类似于css中的after伪元素
node.insertBefore(child指定元素) 将一个节点添加到父节点的指定子节点前面类似before伪元素
node是父节点 删除节点
node.removeChild(child) 删除一个子节点 删除留言
点击链接即可删除留言在这里为了不使点击链接后跳转页面添加了javascript:; 复制节点
node.cloneNode() 复制一个节点
如果括号参数为空或者是false是浅拷贝即只拷贝复制节点本身不克隆里面的子节点
如果括号参数为true是深拷贝会复制节点本身以及里面所有的子节点
要注意的是在定义新变量来接复制值时要把复制值放在网页中的某个位置 三种动态元素创建区别
document.write() 直接将内容写入页面的内容流中当文档执行完毕时它会导致页面全部重绘清空页面显示出write()的内容
element.innerHTML 创建多个元素效率更高不要拼接字符串采取数组形式拼接结构复杂
document.createElement() 创建多个元素效率稍微低一点但是结构清晰 创建单元格并删除
tr是行 td是单元格th是行中单元格的内容
遍历数组并获取数组中的对象dates[i][k]表示的是属性值
