1.Dom对象 文档对象模型
可以通过js去操作整个网页
文档指的是整个html页面,对象指的是文档中的任何内容都可以看作是一个对象,模型指的是对象之间的关系
节点:
文档节点(整个html文档)
元素节点(文档中的标签)
属性节点(标签的属性)
文字节点(标签中的文本内容)
1.文档节点
浏览器已经为我们准备好了文档节点对象,这个对象是document,它作为window的属性,可以直接作为全局变量使用,可以在页面中直接使用,文档节点代表的是整个网页,网页中的所有节点都是它的子节点。
• 通过该对象我们可以在整个文档访问内查找节 点对象,并可以通过该对象创建各种节点对象。
2.元素节点
• HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点,
我们可以通过document的方法来获取元素节点。
• 比如:
document.getElementById() //根据id属性值获取一个元素节点对象。
3.属性节点
• 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素 节点的子节点,而是元素节点的一部分。
• 可以通过元素节点来获取指定的属性节点。
• 例如:
– 元素节点.getAttributeNode(“属性名”);
• 注意:我们一般不使用属性节点。
4.文本节点
• 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本 都是文本节点。 网页中的空格和换行也是文本节点
• 它包括可以字面解释的纯文本内容。
• 文本节点一般是作为元素节点的子节点存在的。
• 获取文本节点时,一般先要获取元素节点。在通过元素节点获取文本 节点。
• 例如:
元素节点.firstChild; //获取元素节点的第一个子节点,一般为文本节点
2.事件的基础
事件就是用户和浏览器之间的交互行为 比如点击按钮,放大缩小窗口
当事件触发时,我们通过js代码对这些事件做出反应
我们可以为某元素的对应事件,绑定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数就会被调用
-
绑定函数的方法:
一:直接在标签中通过属性来绑定响应事件
<button id="btn" onclick="alert('我被点了一下')">我是一个按钮 </button>
二、获取对象,通过对象的指定事件来绑定响应函数
var btn=document.getElementById("btn");
btn.onmouseover=function(){
alert("鼠标移入");
}
3.文档的加载
文档中的代码是至上往下顺序执行的,我们习惯将script代码写在整个页面的前面
//为window对象绑定一个onload事件,该事件对应的响应函数会在整个html页面加载完之后再执行
window.onload=function( ){
}
4.Dom查询
1.获取节点和元素节点
- 获取元素节点()//标签
document.getElementById() 根据id值获取一个对象
document.getElementsByTagName() 根据标签名获取一组对 象,即使只查询到一个元素,也会返回一个数组,只不过数组中只有一个元素
document.getElementsByName( ) 根据name属性名获取一组 元素对象
innerHTML这个属性可以访问到元素节点内部的html代码,对于自结束标签(input),这个属性没有意义,因为自结束标签没有内部。
如果需要访问元素的属性,直接使用元素.属性名,唯独访问元素的class属性不能直接使用元素.class而应该使用元素.className
例如
元素.id, 元素.name, 元素.value
2.获取元素节点的子节点和子元素
获取元素节点的子节点 ()
• 通过具体的元素节点调用
getElementsByTagName() 方法,返回当前节点指定了标签名的后代节点
childNodes 属性,表示当前节点的所有子节点 ,返回一个数组
firstChild 属性,表示当前节点的第一个子节点
lastChild 属性,表示当前节点的最后一个子节点
获取当前元素节点的子元素节点
- 通过具体的元素节点调用
- children 属性,可以获取当前元素的子元素,返回一个数组
- firstElementChild 属性,可以获取当前元素的第一个子元素 IE8以下不兼容 不推荐使用 ,推荐用**xxx.children[0]**替代
- xxx.children【xxx.children.length-1】 返回当前元素的最后一个子元素
- xxx.lastElementChild 属性,可以返回当前元素的最后一个子元素
3.获取父节点和兄弟节点/兄弟元素
获取父节点和兄弟节点
• 通过具体的节点调用
- parentNode 属性,表示当前节点的父节点
- parentElement 属性 ,表示当前节点的父元素(只能是元素节点)
- previousSibling 属性,表示当前节点的前一个兄弟节点
- nextSibling 属性,表示当前节点的后一个兄弟节点
获取上一个兄弟元素和下一个兄弟元素
xxx.previousElementSibling 属性,获取xxx的上一个兄弟元素
xxx.nextElementSibling 属性,获取xxx的下一个兄弟元素
4.dom查询剩余的方法和属性
其他属性
• nodeValue 文本节点可以通过nodeValue属性获取和设置 文本节点的内容
innerHTML 元素节点通过该属性获取和设置标签内部的 html代码
document.body 获取页面的body元素
document.documentElement 获取页面的html标签元素
document.all 获取页面中的所有元素
其他方法
document.getElementByClassName(“.box”) 通过类名来查找元素
document. querySelector()
document. querySelectorAll()
这两个方法都是用document对象来调用,两个方法使用相同, 都是传递一个选择器字符串作为参数,方法会自动根据选择器
字符串去网页中查找元素。不同的地方是querySelector()只会返回找到的第一个元素,而
querySelectorAll()会返回所有符合条件的元素。兼容IE8
5.Dom节点的增删改
这里的修改我们主要指对元素节点的操作。
//向parent节点中添加<li>广州</li>节点
• 创建元素节点
a= document.createElement(li)
- 创建文本节点
b=document.createTextNode( “广州”)
创建文本节点需要给方法传入一个文本内容作为参数,浏览器会 根 据该内容创建文本节点,并将新节点返回
a.appendChild(b)
parent.append(a)
- innerHTML属性也可以用来创建Dom节点,只是他的动静太大,之前绑定的响应函数会绑不上,所以不推荐使用
parent.innerHTML+="<li>广州</li>"
-
两者结合
a=document.createElement(“li”);
a.innerHTML=“广州”
parent.appendChild(a);
• 插入节点
父节点.appendChild(子节点)
父节点.insertBefore(新节点 , 旧节点) 在指定的子节点之前插入新的子节点,首先要找到他们的父节点,
才能调用插入的方法
• 删除节点
父节点.removeChild(子节点)
自我删除,自杀: child.parentNode.removeChild(child)
通过父节点删除,他杀 :
首先找到父节点parent和子节点child,再通过parent.removeChild(child)删除
• 替换节点
父节点.replaceChild**(新节点 , 旧节点)**
6.获取元素的样式
1.操作内联样式
语法:元素.style.样式名
语法:元素.style.样式名=样式值
元素.style.width
元素.style.height
此种方法既可以读取内联样式也能设置样式
内联样式是那种将样式写在标签属性中的写法
通过style修改的样式都是内联样式,由于内联样式的优先级比较高, 所以我们通过JS来修改的样式,往往会立即生效,
但是如果样式中设置了**!important**,则内联样式将不会生效
- 注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法
将-去掉,然后-后的字母改大写
- 比如:background-color --> backgroundColor
border-width ---> borderWidth
2.获取元素正在显示的样式
有两种方法,这两种方法都只能读取元素样式,不能设置:
1.元素.currentStyle.样式名 只能在IE8上使用
2.getComputedStyle(要获取样式的元素,伪元素/null); //返回一个对象,通过对象.样式名 得到元素样式
getComputedStyle()方法是window对象自带的 方法,可以直接使用(不兼容IE8及以下版本)
//封装函数,兼容所有浏览器:
//读取obj对象的name样式
function getStyle(obj,name){
//如果当前浏览器里面有getComputedStyle方法,证明是其他浏览器,如果没有就是IE浏览器
//加个window的原因是:**对象属性没找到,返回undefined; 变量没找到,会报错**
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}
else{
return obj.currentStyle[name];
}
}
3.其他样式相关的属性
属性都是只读的,不能修改
xxx.clientWidth ,xx.clientHeight. 返回元素的可见宽度和高度(包括内容区和padding),返回一个不带单位的数字,可直接进行计算,这个值是通过计算得来的,只读,不能修改
xxx.offsetWidth,xxx.offsetHeight 返回整个元素的宽度和高度(包括内容去 padding 和边框)
xxx.offsetParent 定位父元素(规则找到第一个设置了相对定位或绝对定位的祖先元素,如果没找到,就会找body元素)
xxx.offsetLeft 返回当前元素相对于其定位父元素的水平偏移量 返回一个数字
xxx.offsetTop 返回当前元素相对于其定位父元素的垂直偏移量
xxx.scrollWidth, xxx.scrollHeight 返回当前元素整个滚动区域的宽度和高度 返回一个数字
xxx.scrollLeft 返回水平滚动条滚动的距离
document.documentElement.scrollTop 返回垂直滚动条滚动的距离
//当满足scrollHeight-scrollTop=clientHeight时,滚动条就拉到低了
//当满足scrollWidth-scrollLeft==clientWidth时,滚动条就拉到低了