js---DOM

DOM

document object model

文档对象模型

var btn=document.getElementById()//通过id获取到一个元素节点对象
var btn=document.getElementsByTagName()//通过标签名获取一组元素节点对象
var btn=document.getElementsByName()//通过name属性获取一组元素节点对象
btn.innerHTML=""//修改按钮的文字

注意，calss属性不能直接采用.的方式获取属性值， 元素.className

innnerText和 innerHTML类似，不同的是它会自动将html标签去除

 

获取元素节点的子节点

getElementsByTagName()

返回当前节点的指定标签名后代节点

children

返回当前节点的所有子元素

childNodes

当前节点的所有子节点

firstChild/lastChild

当前节点的第一个/最后一个子节点

firstElementChild/lastElementChild

当前节点的第一个/最后一个子元素

 

获取父节点和兄弟节点

parentNode

当前节点的父节点

previousSibling

当前节点的前一个兄弟节点

nextSibling

当前节点的后一个兄弟节点

 

根据css选择器查询元素节点对象

document.querySelector()

 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

 document.querySelectorAll()

该方法和querySelector()方法类似，不同的是它会将符合条件的元素封装到一个数组中返回

 

DOM增删改

createElement()

可以用于创建一个元素节点

需要一个标签名作为参数，将会根据该标签名创建元素节点对象

并将创建好的对象作为返回值返回

createTextNode()

可以用来创建一个文本节点对象

需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

appendChild()

向一个父节点中添加一个新的子节点

用法：父节点.appendChild(子节点)

insertBefore()

在指定的子节点前插入新的子节点

语法: 父节点.insertBefore(新节点，旧节点)

 replaceChild()

用一个新的子节点替换原节点

removeChild()

删除一个子节点

 

confirm()

 用于弹出一个带有确认和取消按钮的提示框

需要一个字符串作为参数，该字符串将会作为提示文字显示出来

如果用户点击确认则会返回true，如果点击取消则会返回false

 

 通过js修改元素的样式

语法：元素.style.样式名=样式值

如果带有-的是不合法的，需要改为驼峰命名法

 通过js修改样式是内联样式

内联样式具有较高的优先级，所以通过js修改的样式往往会立即执行

通过js读取的样式都是内联样式，无法读取样式表中的样式

 

获取元素当前显示的样式

语法：元素.currentStyle.样式名

它可以用来读取当前元素显示的样式

如果当前元素没有设置该样式，则获取它的默认值

注意：currentStyle只有IE浏览器支持

其他浏览器可以使用getComputedStyle()这个方法来获取元素当前的样式

这个方法时window的方法，可以直接使用

需要两个参数：

·1.要获取样式的元素

·2.可以传递一个伪元素，一般都传null

该方法返回一个对象，对象中封装了当前元素对应的样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

读取到的样式都是只读的，只能通过style属性来进行修改

 

 

事件

可以为按钮的对应事件绑定处理函数的形式来响应事件

btn.onclick=function(){
    alert("haha")
}

onscroll

该事件会在元素的滚动条滚动时触发 

 

 

文档加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，

如果script标签写到页面的上边，在代码执行时，页面还没有加载

将js代码写到页面下部是为了，可以在页面加载完毕后再执行js代码

为window绑定一个onload事件可以再页面加载之后再触发