- DOM
- 文档对象模型
- JS中通过DOM来对html文档进行操作- 文档
- 表示的就是整个的html网页文档 - 对象
- 表示将网页中的每一个部分都转换为了一个对象 - 模型
- 表示对象之间的关系,方便获取对象
- 文档
- 节点(Node)
- 构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点- 常用节点分类
- 文档节点:整个html文档
- 元素节点:html文档中的标签
- 属性节点:元素的属性
- 文本节点:标签中的文本内容
-
节点的属性
nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 - 获取节点的对象
var btn=document.getElementByID("idName");
- 常用节点分类
-
事件
- 就是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与html之间的交互就是通过事件实现的
- 事件发生后需要有东西去处理事件发生的结果-
我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码就会执行
- 这种方法不推荐使用,会导致结构和行为耦合 -
可以为按钮的对应事件绑定处理函数的形式来响应事件
- 当事件被触发时,其对应的函数将会被调用
- 为单击事件绑定的函数,我们称为单击响应函数btn.onclick=function(){ alert(""); }
-
-
文档的加载
-
浏览器在加载一个页面的时候,是自上向下的顺序加载的,读取到一行就运行一行,如果需要对某一个对象添加响应函数,需要将script标签添加在这个对象的后面,而不是直接写在head里面
-
将JS代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行JS代码
-
事件:
-
onload
- 该事件会在整个页面加载完成之后才触发
- 可以使用的对象:image/window/
- 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
-
-
-
DOM查询
-
获取元素节点
- 通过document对象调用
- innerHTML这个属性就是节点对象的文本内容,是用于获取元素内部的HTML代码的,即两个<> <>中间部分的文本,如果该标签为单标签则无法获取
- innerText可以获取到元素内部的文本内容,会自动将html标签去除
- 如果需要读取元素节点的属性,可以使用元素.属性名的方式进行读取,注意class属性不能采取这种方式读取,如果需要读取class元素需要采用元素.className这种方式进行读取-
方法
-
getElementById()
- 通过id属性获取一个元素的节点 -
getElementsByTagName()
- 通过标签名获取一组元素节点对象
- 这个方法会返回一个类数组对象,所有查找的对象会封装到对象中(以数组的形式展现,如果需要弄出来单独的元素可以用下标的方式展示)-
属性
-
childNodes:表示当前节点的所有子节点
- 会获取包括元素和文本在内的所有子节点
- DOM标签内的空白也会当成子节点 -
children:当前节点的所有子元素
-
firstChild:表示当前节点的第一个子节点
-
lastChild:表示当前节点的最后一个子节点
-
parentNode:表示当前节点的父节点
-
previousSibling:表示当前节点的前一个兄弟节点
-
nextSibling:表示当前节点的后一个兄弟借点
-
-
-
getElementsByName()
- 通过name属性获取一组元素节点对象 -
getElementsByClassName()
- 可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器 -
querySelector()
- 选择器
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
- 例子:获取class为box1中的所有divvar div1=document.querySelector(".box1 div");
- 这种方法比上面的ByClassName更佳灵活
- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,只会返回第一个满足条件的元素 -
querySelectorAll()
- 该方法和上面的方法用法类似
- 不同的是会将符合条件的元素封装到一个数组中并且返回数组 -
document的属性
-
在document中有一个属性body,它保存的是body的引用(如果想要获取body标签可以使用)
var body=document.body;
-
里面还有一个属性documentElement,保存的是html根标签
var html=document.documentElement;
-
all属性,保存的是页面中所有的元素
-
-
-
-
-
DOM增删改减
-
document.createElement()
- 可以用来创建一个元素节点对象
- 需要一个标签名作为参数,将会根据标签名创建元素节点对象
- 将创建好的对象作为返回值返回 -
document.createTextNode()
- 可以用来创建一个文本节点对象
- 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回 -
appendChild()
- 向一个父节点添加一个新的子节点
- 用法:父节点.appendChild(子节点) -
insertBefore()
- 在指定的子节点前面插入新的子节点
-用法:父节点.insertBefore(新节点,旧节点); -
replaceChild()
- 用指定的子节点替换另一个子节点
-语法:父节点.replaceChild(新节点,旧节点); -
removeChild()
- 可以删除一个子节点
- 语法:父节点.removeChild(子节点);
- 代替方法:bj.parentNode.removeChild(bj);-------更加方便
-
-
添加删除修改记录
- 点击超链接以后,超链接会默认跳转页面,如果此时我们不希望出现默认行为,可以通过在响应函数的最后使用return false来取消默认行为-
confirm()
- 用于弹出一个带有确认和取消按钮的提示框
- 需要一个字符串作为参数,该字符串将会作为提示文字显示出来
- 如果用户选择确认,返回ture,如果用户选择取消,返回false,所以需要一个变量来接受用户选择结果
-
-
操作内联样式
-
通过JS修改元素的样式:
- 语法:元素.style.样式名=样式值
- 注意:如果css样式名中含有-,这种名称在js中是不合法的,需要将这种样式名修改为驼峰命名法
- 我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示,但是如果样式中写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式 -
通过JS读取元素的样式
- 语法:元素.style.样式名
- 通过style属性设置和读取的都是内联样式,和通过style标签设置的样式不是一样的,所以通过属性无法读取style标签里面的样式-
读取标签里样式
- 语法:元素.currentStyle.样式名
- 可以用来读取当前元素正在显示的样式(不局限于内联样式)
- 这种方法只有IE浏览器支持,其他浏览器不支持
在其他浏览器中可以使用getComputedStyle()方法来获取元素的样式
- 这个方法是window的方法,可以直接使用
- 需要两个参数 第一个:要获取样式的元素 第二个:可以传递一个伪元素,一般是null
- 该方法会返回一个对象,对象中封装了当前元素对应的样式,如果需要读取某一个属性,就在后面加.属性名 -
上面两种方法都是只读的,如果想要修改style需要通过getStyle()函数来修改
-
getStyle()
-
function getStylr(obj,name){ //正常浏览器的方式 return getComputedStyle(obj,null)[name]; //IE8的方式 return obj.currentStyle[name]; }
-
-
-
其他样式的属性
-
element.clientWidth
- 返回元素的可见宽度
element.clientHeight
- 返回元素的可见高度
这些属性都是不带px的,返回的是一个数字,可以直接进行计算
- 获取的数值包括内容区和padding值
- 这个属性是只读的,不能用来修改样式 -
offsetWidth
offsetHeight
- 可以获取元素的整个大小,包括内容区,padding和border
- 只读,不包括px,返回数值 -
offsetParent
- 返回元素的定位父元素,会获取到离当前元素最近的开启了定位的祖先元素,如果祖先元素都没有开启定位的话,则会返回body
- 有点像获取父节点,但是父节点必须是开启了定位的(即positioin值不是static的) -
offsetLeft
- 当前元素相对于其定位父元素的水平偏移量
offsetTop
- 当前元素相对于其定位父元素的垂直偏移量 -
scrollHeight
scrollWidth
- 可以获取元素整个滚动区域的高度,包含隐藏高度,clientHeight则是可见的高度
scrollLeft
- 可以获取水平滚动条的距离
scrollTop
- 可以获取垂直滚动条的距离
scrollHeight - scrollTop = clientHeight -
onscroll
- 该事件会在元素的滚动条滚动时触发
-
-
JS - 03(DOM)
最新推荐文章于 2024-09-26 01:42:12 发布