DOM
document object model 文档对象模型 操作html
document是最大的dom对象
dom对象:js中把标签,称为dom对象
获取元素
-
通过元素的id获取
document.getElementById(“id名字”)
返回值:dom对象
-
通过元素的标签名获取
document.getElementsByTagName(“标签名”)
返回值: 类数组
注意:
前面的document也可以是别的dom对象,只要是它的祖先元素就可以,在祖先元素的范围内去找某些标签
好处:范围进一步缩小
-
通过 元素的 类名来获取元素 IE8以下不支持
document.getElementsByClassName(“class值”)
返回值:类数组
注意: 前面的document也可以是别的dom对象,只要是它的祖先元素就可以,在祖先元素的范围内去找某些标签
好处:范围进一步缩小
如何获取目标元素
target属性 保存了目标元素 DOM标准
srcElement属性 IE
兼容: var target = e.target || e.srcElement;
新增 h5选择器
document.querySelector(“css选择器”)
找到第一个符合条件的元素,就立即返回,返回是dom对象
document.querySelectorAll(“css选择器”)
找到所有的符合条件的元素,返回的数类数组
DOM操作
创建一个dom对象
document.createElement("标签名");
插入:
内部
父元素.appendChild(插入的元素)
作为父元素的最后一个子元素插入的
外部
父元素.insertBefore(新的元素,在谁之前);
删除
父元素.removeChild(删除的元素)
替换一个元素
父元素.replaceChild(新的元素,被替换的元素);
文档碎片:
var arr= [1,2,3,4,5,56];
var list = document.getElementById("list");
var container = document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
var oli = document.createElement('li');
oli.innerHTML = arr[i];
container.appendChild(oli);
}
list.appendChild(container)
作用:提高代码运行效率,减少页面的重新渲染
页面什么时候回重新渲染(dom重构和回流):
当我们改变了元素的布局相关样式
(宽高、位置、元素显示消失)
元素属性操作
获取元素的属性
元素.getAttribute("属性名"); *****
设置元素的属性
元素.setAttribute("属性名",值); 了解
移除一个元素的属性
元素.removeAttribute("属性名"); 了解
dom对象也是对象 具备对象的基础语法
获取:
元素.属性名
元素['属性名']
设置
元素.属性名=值
元素['属性名']=值
{
nodeName:"DIV",
innerHTML:"内容",
className:"class属性",
style:{
}
}
dom对象:在html中自定义的属性,是不在dom中的,就不能通过对象名.属性名,js为了方便使用,封装了方法 getAttribute() 可以获取自定义属性
总结:
获取元素的属性
元素.属性 可以获取元素本来就有的属性 也可以获取在js中自定义的属性 90%需求
元素[属性] 在属性是一个变量的时候用 5%
getAttribute() 万能 在html中自定的属性, 就用它 5%
设置:
元素.属性 = 值
元素[属性]=值
元素.setAttribute("属性",值)
获取和设置元素的类型
className属性 可以获取 可以设置
元素.className获取
元素.className = 值
获取和设置元素的内容
文本内容
innerText 只包含文本 不包含标签
html内容
innerHTML 包含标签 *****
获取元素的样式
js中是通过内联的形式来设置元素的样式
原因:
1,内联的优先级别最高, 保证js代码添加样式一定有效果
2,只针对当前标签有效,不会影响全局的代码
<div style="width:200px;height:200px"></div>
{
style:{
width:"200px",
height:"200px"
}
}
元素.style.css属性名 = "值"
注意:
js中是不允许出现 - css属性中有很多连接符 background-color -webkit-transform-origin
去 - 变驼峰
元素.style.backgroundColor
元素.style.WebkitTransformOrigin="center center"
获取内联样式的值
前提:必须通过内联设置某个css属性的值,才能 通过 元素.style.属性 否则没有值