window对象常用方法
● window.innerHeight - 浏览器窗口的内部高度
● window.innerWidth - 浏览器窗口的内部宽度
● window.open() - 打开新窗口
● window.close() - 关闭当前窗口
navigator对象
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
history对象
history.forward() //前进一页
history.back() //后退一页
location对象
location.href //获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
计时相关
1. var t=setTimeout("JS语句",毫秒) # 开一个定时器,只执行一次
2. var t=setInterval("JS语句",毫秒) # 开一个定时器,执行多次,直到清除定时器
3. clearTimeout('定时器') #清除定时器
4. setTimeout('js语句',毫秒) #定时触发清除定时器
DOM
DOM标准规定HTML文档中的每个成分都是一个节点(node):
● 文档节点(document对象):代表整个文档
● 元素节点(element 对象):代表一个元素(标签)
● 文本节点(text对象):代表元素(标签)中的文本
● 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
● 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML:
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应
查找标签
直接查找
通过ID查找:
var a=document.getElementById('d1');
console.log(div);
通过class查找:
var b=document.getElementByClassName('c1')[0]; //返回的是数组,因为class可以重复有多个,因此所有的都放在一个数组中
console.log(b)
通过标签查找
var c=document.getElementByTagName('div'); //展示的是包含所有的div标签的数组
通过name属性查找
var d=document.getElementByName('username');
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
var img =document.createElement('img'); //创建空的img标签
添加节点
img.src='111.png'; //给img标签设置src属性
img.setAttribute('username','a'); //设置自定义属性与设置标签自带属性不同
img.removeAttribute('username'); //删除自定义属性
div=document.getElementById('d1');
div.appendChild(img); //将img标签放入div中
删除节点
div.removeChild(img);
替换节点
div.replaceChild(新的节点,旧的节点)
属性节点
获取文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText="1" //不能添加标签
divEle.innerHTML="<p>2</p>" //可以添加标签
Attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
获取值操作
语法:
elementNode.value
适用于以下标签:
● .input
● .select
● .textarea
● value不能获取文件数据,获取文件数据要用files
class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。
下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。
常用的事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击,使用的对象是form。
绑定方式
方式一:
直接在标签属性中添加
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
//this是实参,表示触发事件的当前元素。
//函数定义过程中的ths为形参。
方式二:
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
标签:DOM,标签,前端,元素,BOM,var,document,节点,属性
From: https://www.cnblogs.com/yexinli/p/17577476.html