DOM。
DOM:
Document Object Model (文档对象模型)。文档指得就是整个网页,对象指得是将网页中的每一个部分都转成对象,模型值得是网页的结构,能体现节点与节点的关系,方便获得对象。
Node(节点)是构成我们网页的最基本的组成部分,网页的每一个部分都可以称为节点。
常用的节点:1:文档节点:整个html文档。
2:元素节点:html文档中的html标签。
3:属性节点:元素的属性。
4:文本节点:html标签中的文本内容。
浏览器已经为我们提供了文档节点对象,对象是window属性,可以在页面内直接使用。
事件:就是用户与浏览器的交互行为。
处理事件:我们可以在事件对应的属性中加一些js代码,当事件触发时,js代码就会被执行。还有一种方式是为对应事件绑定处理函数的形式来响应事件,这样当事件触发时,其对应的函数将会被调用,先获取对象,在为其绑定一个单击事件,比如btn.onclick=function(){}
浏览器在加载一个页面时,是按照自上而下的顺序加载的,读取到一行就运行一行,如果script标签放在上面,页面还没有加载就执行了。onload 这个事件会在整个页面加载完成后才触发。
获取元素:通过document对象来调用。
1:document.getElementById() get 的意思是获得,Element的意思是元素,By的意思是通过,Id的意思是名字。要想修改文本内容,可以元素.innerHTML=" "。通过id属性获取一个元素节点对象。
2:document.getElementsByTagName()通过标签名获取一组元素节点对象。TagName的意思是标签名。这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到数组中。对于自结束标签,innerHTML属性没有意义。如果需要读取元素节点属性名,直接使用元素.属性名。class不能使用这种方式,读取class属性时需要使用元素.className
3:document.getElementsByName()通过name属性获取一组元素节点对象。
获取元素节点的子节点:通过具体的元素节点调用。
1:getElementsByTagName()方法:返回当前节点的指定标签名后代节点。
2:childNodes属性:表示当前节点的所有子节点。
3:firstChild属性:表示当前节点的第一个子节点。
4:lastChild属性:表示当前节点的最后一个子节点。
5:children属性:可以获取当前元素的所有子元素。
获取父节点与兄弟节点:通过具体的节点调用
1:属性parentNode表示当前节点的父节点。innerText可以获取元素内部的文本内容,与innerHTML不同的是他会将html标签去除。
2:属性previousSibling表示当前节点的前一个兄弟节点
3:属性nextSibling表示当前节点的后一个兄弟节点。
要想获取body直接document.body。documnet.documentElement是html。document.all是所有的元素。
根据元素的class属性值查询一组元素节点对象.document.getElementsByClassame() 可以获取一组元素节点对象。
document.querySelector(),需要一个选择器的字符串作为参数,可以根据一个class选择器来查询一个元素节点对象。使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,但只会返回第一个。document.querySelectorAll()它会将符合条件的元素封装到一个数组中返回。
DOM增删改:
document.createElement(),创建元素节点。它可以创建一个元素节点对象,需要一个标签名作为参数,将会根据该标签名创建元素对象,并将创建好的对象作为返回值返回。
document.createTextNode(),可以创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回。
appendChild(),像父节点中添加一个新的子节点。用法:父元素.appendChild(字节点)
insertBefore(),在指定的子节点前插入新的子节点。语法:父节点.insertBefore(新节点,旧节点)
replaceChild(),使用指定的子节点替换旧的子节点,语法:父节点.replaceChild(新节点,旧节点)
removeChild(),可以删除一个子节点。语法:父节点.removeChild(子节点)
使用innerHTML也可以完成DOM增删改的相关操作。
confirm()用于弹出带有一个确认和消失的提示框,需要一个字符串作为参数,该字符串将会作为提示文字显示出来。如果用户点击确认,则返回true,如果用户点击消失,则返回false.
使用DOM操作css:
语法:元素.stye.样式名=样式值。如果css的样式中含有-,在js中这是不被允许的,需要将这种样式名改为驼峰命名法,去掉-号。我们通过style设置的属性都是内联样式。
读取:语法:元素.style.样式 通过style读取的内连样式。 获取元素当前显示的样式;语法:元素.current(当前的)Style.样式名,它可以读取当前元素正在显示的样式名,如果当前元素没有设置该样式,则获取默认值。
读取:getComputedStyle()这个方法来获取当前的样式,这个方法是window的方法,可以直接使用。需要2个参数:第一是样式的元素,第二个可以传递一个伪元素,一般都是null.该方法会返回一个对象,对象中封装了当前元素的样式 。可以通过对象.样式名来读取样式。如果获取的样式没有设置,则会获取真实的值,不会获取默认值。
读取:定义一个函数来获取指定元素的当前样式,参数:obj 要获取的样式的元素 name要获取的样式。
通过getComputedStyle()和currentStyle()读到的样式都是只读的,不能修改,修改只能通过style属性。
clientWidth和clientHeight可以获取元素的可见宽度和高度,返回的值可以直接计算,包括内容区和边距,这些属性只能读不能改。
offsetWidth和offsetHeight可以获取元素的整个宽度和高度,包括内容区,内边距和边框。
offsetParent可以定位当前元素的父元素,会获取当前元素最近的开启了定位的祖先元素,如果所有的祖先元素都没有开启定位,则返回body.
offsetLeft与offfsetRight可以获取当前元素相当于其定位父元素的水平偏移量。