DOM
属性
返回节点名称nodeName
var nlist = document.querySelector('ul')
var li = document.querySelector('.three')
console.log(nlist.nodeName);*//ul*
返回当前节点的父节点parentNode
console.log(nlist.parentNode);*//body*
console.log(nlist.parentNode.parentNode);*//html*
返回所有节点childNodes 类数组
console.log(nlist.childNodes)*//[text, li, text, li, text, li, text]*
返回第一个子节点firstChild
返回第一个子节点firstElementChild
console.log(nlist.firstChild)*//#text*
console.log(nlist.firstElementChild)*//<li>.狗.</li>*
返回最后一个子节点lastChild
返回最后一个子节点lastElementChild
console.log(nlist.lastChild)*//#text*
console.log(nlist.lastElementChild)*//<li>猪</li>*
返回上一个节点previousSibiling
返回上一个节点previousElementSibiling
console.log(li.previousSibling)
console.log(li.previousElementSibling)*//猫的li*
返回下一个节点nextSibiling
返回下一个节点nextElementSibiling
console.log(li.nextSibling)
console.log(li.nextElementSibling)*//鸭的li*
document属性
获取html标签
var html = document.documentElement
console.log(html)
获取body标签
var body = document.body
console.log(body)
设置或获取title内容
var title = document.title
document.title = ‘包育龙pink pig’
console.log(title)
返回当前页面的网址
var url = document.URL
console.log(url)
页面互相传值(例子)
第一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 页面之间传值
a标签
浏览器存储
-->
<!-- 网址拼接内容用?,写在?后面 -->
<a href="01.html?name=bao&age=88&like=pig">01</a>
</body>
</html>
传到另一个页面并显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pink pig</title>
</head>
<body>
姓名:<h2>=pink pig</h2>
年龄:<h2>88</h2>
爱好:<h2>eating</h2>
</body>
<script>
//4.返回当前页面的网址
var url = document.URL
console.log(url)
var h2s = document.querySelectorAll('h2')
// 1.通过索引截取问号后面的内容
var str = url.slice(url.indexOf('?') + 1)
console.log(str)//name=bao&age=88&like=pig
//通过&将字符串分割为数组
var shuzu = str.split('&')
console.log(shuzu)//['name=bao', 'age=88', 'like=pig']
//遍历数组,等号再次分割
for (var i = 0; i < shuzu.length; i++) {
var shuzu2 = shuzu[i].split('=')
console.log(shuzu2)//['name', 'bao']
//['age', '88']
//['like', 'pig']
//如果想拿到对应的属性值,判断
if (shuzu2[0] == 'name') {
console.log(shuzu2[1])
h2s[0].innerHTML=shuzu2[1]
}
if (shuzu2[0] == 'age') {
console.log(shuzu2[1])
h2s[1].innerHTML=shuzu2[1]
}
if (shuzu2[0] == 'like') {
console.log(shuzu2[1])
h2s[2].innerHTML=shuzu2[1]
}
}
</script>
</html>
- 封装后的
var url = document.URL
console.log(url)
var h2s = document.querySelectorAll('h2')
// 1.通过索引截取问号后面的内容
var str = url.slice(url.indexOf('?') + 1)
//name=bao&age=88&like=pig
//通过&将字符串分割为数组
var shuzu = str.split('&')
//['name=bao', 'age=88', 'like=pig']
//遍历数组,等号再次分割
for (var i = 0; i < shuzu.length; i++) {
var shuzu2 = shuzu[i].split('=')
//['name', 'bao']
//['age', '88']
//['like', 'pig']
//如果想拿到对应的属性值,判断
if (shuzu2[0] == 'name') {
h2s[0].innerHTML=shuzu2[1]
}
if (shuzu2[0] == 'age') {
h2s[1].innerHTML=shuzu2[1]
}
if (shuzu2[0] == 'like') {
h2s[2].innerHTML=shuzu2[1]
}
}
//分装函数 声明
function getValue(key){
var url = document.URL
var h2s = document.querySelectorAll('h2')
var str = url.slice(url.indexOf('?') + 1)
var shuzu = str.split('&')
for (var i = 0; i < shuzu.length; i++) {
var shuzu2 = shuzu[i].split('=')
if (shuzu2[0] == key) {
console.log(shuzu2[1])
return shuzu2[1]
}
}
}
//调用函数
h2s[2].innerHTML= getValue('like')
h2s[0].innerHTML=getValue('name')
h2s[1].innerHTML=getValue('age')
给标签设置属性
设置属性setAttribute(属性名,属性值)
img.setAttribute('src','./1.jpg')
获取属性getAttribute(属性名)
console.log(img.getAttribute('alt'));
删除属性removeAttribute(属性名)
img.removeAttribute('src')
元素大小
client
-
height+padding width+padding
-
和子元素大小有关系
-
动态的得到该元素的边框大小,元素大小
client系列属性 | 作用 |
---|---|
(某元素)element.clientTop | 返回某元素上边框的大小 |
element.clientLeft | 返回某元素左边框的大小 |
element.clientWidth | 返回自身包括padding,+内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding,+内容区的高度,不含边框,返回数值不带单位 |
offset
-
和子元素大小没关系
-
动态的得到该元素的位置(偏移)、大小等。
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body |
(某元素)element.offsetTop | 返回某元素相对带有定位父元素上方的偏移 |
element.offsetLeft | 返回某元素相对带有定位父元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding,+border,+内容区的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括padding,+border,+内容区的高度,返回数值不带单位 |
scroll
- 动态的得到该元素的大小和滚动距离
- height+padding width+padding
- 和子元素大小有关系,当子元素超出父元素大小时,
- scrollWidth:子元素的width+padding+border+margin-left+父元素的border,
- scrollHeight:子元素的height+padding+border+margin-top+父元素的border
scroll系列属性 | 作用 |
---|---|
(某元素)element.scrollTop | 返回被卷去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际宽度,不含边框,返回数值不带单位 |
element.scrollHeight | 返回自身实际高度,不含边框,返回数值不带单位 |
overflow
overflow:hidden | 超出父元素部分隐藏 | 解决塌陷问题 |
overflow:scroll | 超出父元素部分以滚动条显示 | |
overflow-x:hidden | x方向隐藏,y方向以滚动条显示 | |
overflow-y:hidden | y方向隐藏,x方向以滚动条显示 |