操作DOM元素
getElementById("id名")
getElemensByClassName("class类名")
getElementsByTagName("标签名")
querySelector("id名 | class类名 | 标签名") 需要加点和井号
querySelectorAll("class类名 | 标签名") 需要加点
document.body 获取body标签
document.documentElement 获取html标签
点属性名
getAttribute("属性名")
setAttribute("属性名"，"属性值")
dataset点属性名
removeAttribute("属性名")
parentNode
childNodes
children
nextSibling
previousSibling
nextElementSibling
previousElementSibling
nodeType 节点类型 元素节点=1，文本节点=3
onfocus
onblur
createElement
appendChild
insertBefore(新标签,指定位置)
1、获取元素节点
(1)获取id类型标签元素 getElementById("id名")
<body>
<div id="header">getElementById获取标签</div>
<script>
// getElementById(id) 获取ID标签元素
// id是大小写敏感的字符串，代表了所要查找的元素的唯一ID
// 返回一个匹配到ID首位DOM Element 对象 若在当前Document 下没有找到，则返回null
var he = document.getElementById("header");
console.log(he);
</script>
</body>
(2)获取class类型标签元素
var row = document.getElementsByClassName("row"); //单纯获取
var row = document.getElementsByClassName("row")[0]; //获取第一个class
(3)获取标签元素
var ul = document.getElementsByTagName('ul');
(4)获取元素节点(新方法)
//获取标签元素
var div = document.querySelector('div')
//获取class类型标签元素
var nav = document.querySelector('.nav');
//获取所有的class类型标签元素
var navs = document.querySelectorAll('.nav');
//获取id类型标签元素
var cont = document.querySelector('#cont');
//获取所有的li标签元素
var cont = document.querySelectorAll('li');
(5)获取特殊元素 body html
// 获取特殊元素 body html var bodyEle = document.body; console.log(bodyEle); var htmlEle = document.documentElement; console.log(htmlEle);
(6)获取自定义属性值
<body>
<div id="demo" data-index="20">
<div id="cont"></div>
</div>
<ul>
<li>元素节点1</li>
<li>元素节点2</li>
<li>元素节点3</li>
<li>元素节点4</li>
<li>元素节点5</li>
</ul>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var div = document.querySelector("div");
// 获取属性值/
console.log(div.id);
console.log(div.getAttribute("id"));
// dataset 是获取h5提供的方法 获取data- 开头的自定义属性的值
console.log(div.dataset.index);
console.log(div.dataset['index']);
//设置属性值
console.log(div.id = "test");
div.setAttribute("id", "test1")
console.log(div.id);
// 删除属性值
div.removeAttribute("id")
console.log(div.id);
// 获取父节点(亲爸爸) parentNode
var cont = document.querySelector('#cont');
console.log(cont.parentNode);
// 获取子节点 childNodes 所有的子节点 元素节点的nodeType=1，文本节点的nodeType=3； nodeType 节点类型
var ul = document.querySelector('ul');
console.log(ul.childNodes);
// 获取子元素节点 children
console.log(ul.children);
// 获取指定元素 重点(开发中最常使用的)
console.log(ul.children[0]); // 第一个元素节点
console.log(ul.children[ul.children.length - 1]); //最后一个元素节点
// firstChild lastChild 获取第一个节点 最后一个节点 包含(文本节点和元素节点)
console.log(ul.firstChild);
console.log(ul.lastChild);
// 获取元素节点 firstElementChild lastElementChild 有兼容性问题 IE9以上的浏览器才兼容
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
var nav = document.querySelector('.nav');
for (var i = 0; i < nav.children.length; i++) {
nav.children[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
nav.children[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
(7)获取兄弟节点
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// nextSibling 下一个兄弟节点 包含元素节点或文本节点
console.log(div.nextSibling); //下一个节点
console.log(div.previousSibling); //上一个节点
console.log(div.nextElementSibling); // 下一个元素节点
console.log(div.previousElementSibling); // 上一个元素节点 找不到，返回空null
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
console.log(getNextElementSibling(div));
</script>
</body>
(8)获取光标和失去光标
<h1>获取光标和失去光标</h1>
<input value="手机" type="text"></input>
<h1>判断输入的信息是否符合要求，并作出提示</h1>
<div class="yn">
<label class="" for="">
<!-- 图片文字水平垂直居中 img设置align属性值为absmiddle -->
<img id="img" src="/images/ts.png" align='absmiddle' alt="">
<span id="sp">6-16位(字母,数字,字符)组成，区分大小写</span>
</label>
<input type="password" id="pwd" name="password"></input>
</div>
// 获取光标和失去光标
var text = document.querySelector('input');
text.onfocus = function() {
if (this.value === '手机') {
this.value = '';
this.style.color = '#333';
}
}
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
this.style.color = '#999';
}
}
// element.className = 'first'; 修改类样式 多个可以这样写 element.className = 'first change';
// 判断输入的信息是否符合要求，并作出提示
var pwd = document.querySelector('#pwd');
var img = document.querySelector('#img');
var sp = document.querySelector('#sp');
pwd.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
img.src = '/images/no.png';
sp.innerHTML = '不符合要求，请重新输入！';
sp.style.color = '#f3270d';
} else {
img.src = '/images/yes.png';
sp.innerHTML = '可以使用！';
sp.style.color = '#1afa29';
}
}
2、创建和添加元素节点
<body>
<ul></ul>
<script>
// 1、创建元素节点 createElement
var li = document.createElement("li");
// 2、添加元素节点 node.appendChild(child) 追加元素节点
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3、添加元素节点 node.insertBefore(child,指定元素) 指定的元素节点前添加元素节点
var lili = document.createElement("li");
ul.insertBefore(lili, ul.children[0]);
// 添加一个新的元素节点，先创建后添加，创建的元素节点只能使用一次
</script>
</body>
浙公网安备 33010602011771号