一、DOM的含义
1、DHTML
动态的HTML,是现有技术整合的一个统称,让网页在离线状态也能保存动态效果
DHTML = HTML + CSS + JS
2、DOM
文档对象模型,专门用于操作文档(HTML和CSS)
3、DOM树
在HTML文档中,所有的元素、属性、文本、注释等都会被视为一个DOM节点/DOM对象/DOM元素
4、概念:其实树根是document对象
在JS中,不需要我们去创建的,由浏览器的js解释器自动创建,且一个页面只有一个document
作用:通过树根可以找到下面的任何一个DOM元素,还可以操作他
5、获取元素:类似css的选择器 - 必须先找到元素才能操作元素
1、通过 HTML的特性 获取元素:
(1)、ID获取:
语法:var elem=document.getElementById("id值"); -- id是唯一
在当前 DOM树中,根据元素的id,获取具体的dom节点
返回:找到了,保存的就是对应的元素
没找到,返回的是一个null
强调:输出来长得像一个标签的样子,才叫做DOM节点/DOM对象/DOM元素,才能去执行后续操作
(2)、标签名获取:
语法:var elems=document/parent.getElementsByTagName("标签名");
在当前 DOM树中,根据元素的标签名,获取了具体的dom集合(类数组集合)
返回:找到了,返回的是一个类数组集合
没找到,返回的是一个空集合[];
强调:1、dom集合不允许直接做后续操作,会报错
解决:1、加下标获取到某一个 2、循环遍历获取到所有
2、parent代表的是你已经找到的某个父元素
(3)、class名获取
语法:var elems=document/parent.getElementsByClassName("class名");
在当前 DOM树中,根据元素的class名,获取了具体的dom集合(类数组集合)
返回:找到了,返回的是一个类数组集合
没找到,返回的是一个空集合[];
强调:1、dom集合不允许直接做后续操作,会报错
解决:1、加下标拿到某一个 2、循环遍历拿所有
2、parent代表的是你已经找到的某个父元素
2、通过 元素之间的关系 获取元素:
使用的前提条件:至少要找到一个人才能动用关系
父元素:xx.parentNode; //单个元素
子元素:xx.children; //集合
第一个儿子:xx.firstElementChild; //单个元素
最后一个儿子:xx.lastElementChild; //单个元素
前一个兄弟:xx.previousElementSibling; //单个元素
后一个兄弟:xx.nextElementSibling; //单个元素
强调:集合不能做操作,只有单个元素可以
6、操作元素
前提:1、至少要找到元素
2、页面上所有的东西数据类型都是一个字符串
1、元素的内容
1、innerHTML属性:
语法:获取:elem.innerHTML; - 往往都是用来做判断的
设置:elem.innerHTML="内容"; - 修改
2、innerText属性:
语法:获取:elem.innerText;
设置:elem.innerText="文本";
小总结:以上两个操作几乎相似,但是innerHTML才可以识别标签,innerText只能操作纯文本 - 只有双标签可用
3、value属性:专为单标签input准备的获取和设置内容
语法:获取:input.value;
设置:input.value="值";
2、元素的属性
什么叫属性:<elem id class src alt href title style ></elem>
1、获取元素的属性值 - 往往都是用来做判断的
elem.getAttribute("属性名");
2、设置元素的属性值 - 修改
elem.setAttribute("属性名","属性值");
属性的简化版操作:
1、获取元素的属性值:elem.属性名; - 往往都是用来做判断的
2、设置元素的属性值:elem.属性名="属性值"; - 修改
简化版小缺陷:1、class必须写为className
2、自定义属性不能操作,只能操作标准属性
3、元素的样式
1、CSS定义的方式:
1、内联样式 - JS要操作最好就要操作内联样式
2、内部样式表
3、外部样式表 - 一阶段最适合开发时使用
2、为什么JS要尽量的操作内联样式:
1、优先级最高 - 写的JS的样式不至于别人给覆盖了
2、牵一发而动全身 - 内联样式只会修改到当前元素
3、语法:
获取:elem.style.css属性名; - 往往都是用来做判断的
设置:elem.style.css属性名="css属性值"; - 修改
特殊:1、css属性名写法不一样,把横线删掉换成驼峰命名法
CSS: JS:
width width
background-color backgroundColor
border-top borderTop
7、新的绑定事件的操作:
HTML与JS分离
elem.οnclick=function(){
写操作
特殊:事件中可以使用一个关键字 this
1、单个元素绑定了事件 this->这是单个元素
2、多个元素循环同时绑定了事件 this->当前触发事件的元素
建议:如果你在事件中想要使用到绑定事件的元素,推荐使用this
}