一些 DOM 对象方法:
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
获取DOM元素的方法有几种：
通过ID获取（getElementById）
例：document.getElementById('id')
通过name属性（getElementsByName）
例：document.getElementsByName('name')
通过标签名（getElementsByTagName）
例：var obj = document.getElementsByTagName('div');
通过类名（getElementsByClassName）
例：var obj = document.getElementsByClassName('animated')
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。
var li = document.querySelector("ul");
console.log(ul.childNodes) 文本节点
console.log(ul.children) 不包括文本节点
console.log(li.parentElement.parentElement.parentElement.parentElement);//找的元素 最多找到body
console.log(li.parentNode.parentNode.parentNode.parentNode);//内容一样 类型不一样 找的节点 最多找到html
li.style.background-color="#ccc"; //短横线不能写 不起作用 首字母小写
驼峰命名法
// li.style.backgroundcolor="#ccc";
//数组命名法
// li.style["background-color"]="#ccc";
一些常用的 HTML DOM 属性:
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #documen
事件:
* click 当用户点击鼠标时
* change 单选、多选状态改变 下拉框选项改变。文本框的值改变
* mouseover 鼠标被移到某元素之上
* mouseout 鼠标从某元素移开
keydown 某个键盘的键被按下
keyup 某个键盘的的键被松开
* keypress 当用户触发按键时
onload 某个页面或图像被完成加载
onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies
实例
<body onload="checkCookies()">
var btn = document.querySelector("button");
// btn.onclick = function(){
// // console.log(this.value) 交互控件的值
// }
//获取鼠标位置
// console.log(e.x,e.y)
<!-- 如何让内容跟着鼠标走 -->
<script>
window.onload = function (){
var div = document.querySelector("div");
var span = document.querySelector("span");
div.onmousemove = function(e){
//获取鼠标位置
// console.log(e.x,e.y)
span.style.top = e.y+"px";
span.style.left = e.x +"px";
}
}
</script>
<!-- //选项卡 怎么写-->
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
ul li{
display: inline-block;
width: 60px;
height: 20px;
}
ul li a{
display: block;
text-align:center ;
background-color: #ccc;
color: blueviolet;
text-decoration: none;
}
.active{
background-color: yellow;
}
.content{
width: 300px;
height: 200px;
border:1px solid #ccc ;
}
</style>
<script>
window.onload = function (){
var as = document.querySelectorAll("li a");
for(var i=0; i< as.length;i++){
as[i].onclick = function(){
for(var j=0;j<as.length;j++){
as[j].className="";
}
this.className="active";
var url = this.attributes["data-url"].value;
//向服务器发送请求
}
}
}
</script>
浙公网安备 33010602011771号