一、原生js的操作
1、添加一个类名
div.className=“box”
2、修改样式
this.style.color=“red”
3、元素自带的属性可以通过"."来获取属性值
getAttribute可以获取自带属性和自定义属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo" class="nav" index="1" ></div>
<script>
var div = document.getElementById("demo")
console.log( div.id ) //自带属性
console.log( div.className ) //自带属性
console.log( div.index ) //自定义属性不能使用.访问 undefined
//getAttribute 可以获取自带属性和自定义属性
console.log( div.getAttribute("id") )
console.log( div.getAttribute("class") ) //如果是getAttribute,那么只写class
console.log( div.getAttribute("index") )
//同理适用于设置属性
//自带属性,可以使用.来设置
div.id = 'test'
//自定义属性,无法使用.修改
div.index = "100"
//setAttribute 可以设置自带属性和自定义属性
div.setAttribute("class",'hello')
div.setAttribute("index",'1000')
//删除属性
div.removeAttribute("id")
div.removeAttribute("class")
div.removeAttribute("index")
</script>
</body>
</html>
4、h5新增的设置自定义属性的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div data-index="2" data-money="200" data-list-name-good="2000"> </div>
<script>
var div = document.querySelector("div")
//通用方法
console.log( div.getAttribute("data-index") )
div.setAttribute("data-index","1000")
//H5新增方法
console.log( div.dataset ) //data-开头的所有属性
console.log( div.dataset.index ) //使用点语法,可以获取index
console.log( div.dataset.listNameGood ) //如果有超过一个的-,那么后面的单词使用驼峰原则
console.log( div.dataset['money'] ) //使用中括号也可以获取
//修改
div.dataset.index = 20
div.dataset['index'] = 150
</script>
</body>
</html>
5、获取子节点、父节点和兄弟节点
父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="demo">
<div class="box">
<div class="son">hello</div>
</div>
</div>
<script>
var son = document.querySelector(".son")
//获取父级节点. 任何一个节点都只有一个父节点
console.log( son.parentNode ) //box
console.log( son.parentNode.parentNode ) //demo
//如果没有父节点了,就会返回null
console.log( son.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode )
</script>
</body>
</html>
子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>我是一个li元素</li>
<li>我是一个li元素</li>
<li>我是一个li元素</li>
<li>我是一个li元素</li>
<li>我是一个li元素</li>
</ul>
<script>
var ul = document.querySelector("ul")
//获取ul的所有子节点. 包含换行符(文本节点),和li元素
console.log( ul.childNodes )
console.log( ul.childNodes[0] ) // \n
console.log( ul.childNodes[1] ) // li元素
// 如何区分换行符和li元素? 通过nodeType 1元素 3文本 2属性
console.log( ul.childNodes[0].nodeType ) //3
console.log( ul.childNodes[1].nodeType ) //1
// ul的所有元素子节点. 不会含有文本节点
console.log( ul.children )
//获取ul的第一个子节点. 它可能是元素节点,也可能是文本节点
console.log( ul.firstChild )
console.log( ul.lastChild )
//获取第一个,最后一个元素节点. IE9只会才支持
console.log( ul.firstElementChild )
console.log( ul.lastElementChild )
//也可以使用children
console.log( ul.children[0] )
console.log( ul.children[ul.children.length-1] )
</script>
</body>
</html>
兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//var div = document.querySelector("div")
//下一个兄弟节点. 可能是文本节点
//console.log( div.nextSibling )
//前一个兄弟节点. 可能是文本节点
//console.log( div.previousSibling )
//下一个元素兄弟节点
//console.log( div.nextElementSibling )
//前一个元素兄弟节点
//console.log( div.previousElementSibling ) //如果前面没有,就返回null
//如果需要兼容老版本IE9之前,这不能够使用nextElementSibling
//那么封装一个函数
function getNextElementSibling(element)
{
var el = element //将元素赋值给el
while ( el = el.nextSibling ) //拿元素的下一个节点,来进行判断.如果不为null,则继续循环
{
if(el.nodeType === 1) //如果这个节点类型为1,就代表是元素节点
{
return el //就返回这个元素节点
}
//如果当前节点不是元素节点,则代表需要进行下一次循环
}
return null
}
// var next = getNextElementSibling(div)
// console.log( next ) span标签
//等待页面上的所有元素加载完毕后,再来执行里面的函数体
window.onload =function ()
{
//span标签后面没有元素兄弟节点,所以应该返回null
var span = document.querySelector("span")
var next = getNextElementSibling(span)
console.log( next )
}
</script>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
</body>
</html>
6、克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
<script>
var ul = document.querySelector("ul")
//复制这个ul
// var ul2 = ul.cloneNode() //复制ul,但是不包含子元素
// document.body.appendChild( ul2 )
var ul3 = ul.cloneNode(true) //复制ul,包含子元素
document.body.appendChild( ul3 )
</script>
</body>
</html>
7、注册事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>传统注册事件</button>
<button>监听注册事件</button>
<button>ie9 attatchEvent</button>
<button>传统删除事件</button>
<button>监听删除事件</button>
<button>ie9 detatchEvent</button>
<script>
var btns = document.querySelectorAll("button")
//1.传统注册事件 只有最后一个函数生效
btns[0].onclick = function () {
alert(11111)
}
btns[0].onclick = function () {
alert(22222)
}
//2.监听注册事件. 绑定了多少个函数,就可以触发多少个函数
//addEventListener(事件名,事件触发的函数)
//这里的事件名不带on. IE9之后才支持
btns[1].addEventListener('click',function () {
alert(11111)
})
btns[1].addEventListener('click',function () {
alert(22222)
})
//兼容IE9之前的注册监听方式
// btns[2].attachEvent('onclick',function () {
// alert(11111)
// })
//1.传统删除事件
btns[3].onclick = function () {
alert(11111)
//清空按钮的事件
this.onclick = null
}
//2.监听删除事件
btns[4].addEventListener('click',fn)
function fn() {
alert(2222)
//清空事件
this.removeEventListener('click',fn)
}
//ie9之前 detatchEvent 谷歌无法演示
btns[5].attachEvent('onclick',fn2)
function fn2() {
alert(3333)
this.detachEvent('onclick',fn2)
}
</script>
</body>
</html>
8、事件冒泡和捕获型事件流
事件冒泡 :从下到上
捕获型事件流:从上往下
9、禁止选中文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world
<script>
//禁止选中文本
document.onselectstart = function (e) {
// e.preventDefault()
return false
}
</script>
</body>
</html>
10、location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function () {
//跳转页面. 并且允许回退
//location.assign("http://www.baidu.com")
//替换页面. 不会产生历史记录,所以不能回退
//location.replace("http://www.baidu.com")
//刷新页面
location.reload(true)
}
</script>
</body>
</html>
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
