操作元素
自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div getTime = '20' data-index = "20" data-list-name = "45"></div>
<
<script>
var getTime = document.querySelector('div');
// div.getTime
console.log(getTime.getAttribute('getTime'));
//规定自定义属性 data-开头
getTime.setAttribute("data-time",20);
//兼容性获取属性值
console.log(getTime.getAttribute('data-time'));
console.log(getTime.getAttribute('data-list-name'));
//dataset 是一个存放了所有data开头的自定义属性 只支持ie11以上
console.log(getTime.dataset);
console.log(getTime.dataset.index);
console.log(getTime.dataset['index']);
//如果自定义属性有多个-链接得单词，我们获取时采取 驼峰命名法
console.log(getTime.dataset.listName);
console.log(getTime.dataset['listName']);
</script>
</body>
</html>
子节点获取
获取第一个子节点 获取最后一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子节点</title>
</head>
<body>
<div>
我是div
</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var li = ul.querySelectorAll('li');
//1.子节点 childNodes得到的节点包括元素节点 文本节点等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);//nodeType 获得的是节点类型
//1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
// 2 Attr 代表属性 Text, EntityReference
// 3 Text 代表元素或属性中的文本内容。 None
// 4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 None
// 5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
// 6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
// 7 ProcessingInstruction 代表处理指令。 None
// 8 Comment 代表注释。 None
// 9 Document 代表整个文档（DOM 树的根节点）。 Element, ProcessingInstruction, Comment, DocumentType
// 10 DocumentType 向为文档定义的实体提供接口 None
// 11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
// 12 Notation 代表 DTD 中声明的符号。
//如果只想获得元素节点 需要处理
for(var i = 0;i < ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType == 1){
//ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
}
//有非标准的 parentNode.children 是一个只读属性 返回所有元素得子元素节点。他只返回子元素节点，其余接待内部返回
//虽然他是非标准，但是得到了各个浏览的支持
//2.children
console.log(ul.children);
//节点层次
//1.firstChild 返回的是第一个子节点 不管是文本还是元素节点
console.log(ol.firstChild);
//2.lastChild 返回的是第一个子节点 不管是文本还是元素节点
console.log(ol.lastChild);
//下面两个方法只有ie9以上才支持
//1.firstElementChild 返回第一个元素节点
console.log(ol.firstElementChild);
//1.lastElementChild 返回最后一个元素节点
console.log(ol.lastElementChild);
// 3.实例开发写法
console.log(ol.children[0]);//得到第一个
console.log(ol.children[ol.children.length - 1]);//得到最后一个
</script>
</body>
</html>
父节点
<p>列表示例：</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
var x = document.getElementById('demo')
var y = document.getElementsByTagName('LI')[0]
x.innerHTML = y.parentNode.nodeName
}
</script>
下拉节点
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
} /**/
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
// // 1. 获取元素
// var nav = document.querySelector('.nav');
// var lis = nav.children; // 得到4个小li
// // 2.循环注册事件
// for (var i = 0; i < lis.length; i++) {
// lis[i].onmouseover = function() {
// this.children[1].style.display = 'block';
// }
// lis[i].onmouseout = function() {
// this.children[1].style.display = 'none';
// }
// }
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
console.log(lis[1].children[1]);
for(var i = 0;i < lis.length; i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none'
}
}
</script>
</body>
</html>
兄弟节点解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
//nextSibling 得到的是下一个兄弟节点 包含文本节点元素节点
console.log(div.nextSibling);//所以这里得到的是文本节点 换行
//previousElementSibling 得到的是上一个兄弟节点 包含文本节点元素节点
console.log(div.previousSibling);//所以这里得到的是文本节点 换行
//虽然好用但是具有兼用型问题支支持ie9以上
//nextElementSibling 得到的是元素的下一个元素节点
console.log(div.nextElementSibling);
//previousElementSibling 得到的是元素的上一个一个元素节点
console.log(div.previousElementSibling);
// 可以封装一个兼用型函数
function hetNextElementSibling(element){//接收一个元素
var el = element;//赋值给el
while(el = el.nextSibling){//获取el得所有下一个节点
if(el.nodeType === 1){//判断是否为元素节点 nodeType 如果为1 iu是元素节点
return el;
}
}
return null;
}
</script>
</body>
</html>
<ul>
<li>123</li>
</ul>
<script>
//1.创建节点 元素节点
var li = document.createComment('li');
//2.添加节点 node.appendChild(child) node父级 child子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
//3.添加节点 node.insertBefore (child,指定元素)
var lili = document.createComment('li');
ul.insertBefore(lili,ul.childNodes[0]);
//4.我们想要给页面添加一个新的元素 1.创建元素 2.天界元素
添加节点简单发布实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>简单留言</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
color: #888;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
.first {
color: #000;
}
</style>
</head>
<body>
<textarea></textarea>
<button>发布</button>
<ul></ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button')
var text = document.querySelector('textarea')
var ul = document.querySelector('ul')
text.value = '请留下您精彩的评论'
text.innerText = '请留下您精彩的评论'
text.onfocus = function () {
console.log('获取了焦点')
if (this.value == '请留下您精彩的评论') {
this.value = ''
}
this.className = 'first'
}
text.onblur = function () {
var ls = this.value
if (this.value.length == 0) {
this.className = ''
text.value = '请留下您精彩的评论'
}
}
btn.onclick = function () {
// console.log(text.value)
// if (text.value == '请留下您精彩的评论') {
// alert('请输入内容！')
// }
if (text.value == '请留下您精彩的评论') {
alert('您没有输入内容')
return false
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li')
// 先有li 才能赋值
li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>" //href = 'javascript:;'禁止a标签跳转
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0])
//删除元素 删除的是当前得li 他的父元素
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//node.removeChild(child) 删除得视li 当前a所在的li this.parentNode
ul.removeChild(this.parentNode)
}
}
}
}
</script>
</body>
</html>
删除节点
<body>
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//删除节点
//获取元素
var ul = document.querySelector('ul')
var btn = document.querySelector('button')
//2.删除元素 node.removeChild(child)
//点击按钮删除li
btn.onclick = function () {
if (ul.children.length == 0) {
btn.disabled = true
} else {
ul.removeChild(ul.children[0])
}
}
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
