JavaScript,通过DOM操作元素内容
DOM介绍:
文档对象模型(document object model),其作用是规定了JS操作网页的规范。
节点(node)
DOM中规定,HTML网页中所有的一切内容都可以看作是一个节点对象,节点对象的类型有:
①document:文档节点,是整个文档的根节点,可以称为document对象
②element node:元素节点,网页中所有的标签(div/a/img等)
③text node:文本节点,网页中所有的文本内容
④attribute node:属性节点,网页中元素的所有属性(class=“box” / href=“#”)
⑤document type:文档类型声明节点()
⑥document fragment:文档片段节点(一段代码)
⑦comment:注释节点,网页中所有的注释
节点树(DOM Tree)
整个文档所有的节点,按照所在的层级,都可以抽象成为一种树状结构上的节点,这种树状结构成为节点树(DOM Tree),document节点是文档的根节点,document节点下包含两个节点:documentType和html两个元素节点。属性节点和元素节点属于兄弟关系。document节点可以直接使用。
1.获取元素节点
1.1利用get方法获取元素节点
①利用id获取
document.getElementById(‘idName’);
1)必须定义在document节点上
2)返回第一个满足条件的【元素节点】
3)ID区分大小写
4)如果获取不到,返回null
②利用标签名获取
node.getElementsByTagName(‘标签名’);
1)node可以是document节点和元素节点
2)标签名不区分大小写
3)返回HTMLCollection:html元素集合,【类数组对象】
4)通过下标获取类数组中的元素节点
③利用类名获取
document.getElementsByClassName(‘类名’);
1)返回类数组对象
2)类名区分大小写
④利用name属性获取(较少使用)
document.getElementsByName(‘名称’);
1)返回类数组对象
2)name的名称区分大小写
1.2利用query方法(css选择器)获取元素节点
①querySelector(‘选择器’)
document.querySelector(‘css选择器’)
返回第一个符合条件的元素节点
②querySelectorAll(‘选择器’)
document.querySelectorAll(‘css选择器’)
返回所有满足条件的元素节点组成的类数组对象
2.创建、添加节点对象
2.1创建元素节点
document.createElement(‘标签名’)
2.2创建文本节点(了解)
document.createTextNode(‘文本’)
2.3创建属性节点(了解)
document.createAttribute(‘属性名’)
2.4添加节点对象
2.4.1.将一个节点作为子节点添加到父元素节点下(元素节点、文本节点)
父元素.appendChild(子节点);
2.4.2.属性节点的添加,属性节点为为元素节点的兄弟节点
let attr = document.createAttribute('属性名'); //创建属性节点
attr.value = '属性值'; //给属性节点赋值
元素节点.setAttributeNode(元素节点); //将属性节点设置到相应的元素节点上
2.5例子
// js创建节点对象
// 1. 创建元素节点
let h1 = document.createElement('h1');
// 2. 创建文本节点
let text = document.createTextNode('下课吧,吃饭啦!!');
// 3. 把文本节点添加到元素节点中(文本节点是元素节点的子节点)
// 父节点.appendChild(子节点):把子节点作为最后一个子节点添加到父节点中
h1.appendChild(text);
// 4. 创建属性节点
let attr = document.createAttribute('align');
// 5. 给属性节点赋值
attr.value = "center";
// 6. 设置属性节点 元素节点.setAttributeNode(属性节点)
h1.setAttributeNode(attr);
// 7. 把元素节点添加到页面中
// 把h1作为body的子节点追加到页面中
document.getElementById('body').appendChild(h1);
3.操作元素节点的内容
3.1.JS操作css样式
3.1.1.通过setAttribute()
元素节点.setAttribute(“style”,“属性值”)
li.setAttribute('style','float:left;');//给li元素设置属性(设置的属性为行内样式)
4.1.2 通过className
元素节点.className=“类名”
<style>
.curcer{
background-color:#fff;
}
</style>
<script>
let div = document.querySelector('div');//获取div元素节点
div.className = 'curcer';//设置div元素节点的类名为curcer
</script>
4.1.3.通过style属性操作【行内样式】
①元素节点.style.属性 = “属性值”;
适用于少量样式
注意: ①当属性包含-时,需要修改小驼峰命名法
②当属性是js的关键字,需要写成cssFloat
③属性值是字符串形式,必须加单位
// 设置行内样式
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "pink";
// 获取行内样式
div.style.width
//删除行内样式
div.style.width = '';
②元素节点.style.cssText=“属性:属性值;属性:属性值;”
适用于多个样式
// 设置行内样式
div.style.cssText = `width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
float:left;
`;
// 获取所有行内样式
div.style.cssText
// 清空所有行内样式
div.style.cssText = '';
③元素节点.style.方法()
元素节点.style.getProppertyValue(“属性名”):获取行内样式
元素节点.style.setPropperty(‘属性名’,‘属性值’,!important):设置行内样式
元素节点.style.removePropperty(“属性名”):删除行内样式
3.1.5 获取最终样式
1) window.getComputedStyle(元素节点)
返回元素的所有样式(包含默认样式)组成的对象,可以通过点或者[]获取属性
2)IE低版本
元素节点.currentStyle
不支持currentStyle属性的浏览器返回undefined
3)兼容性写法
// 思路:支持currentStyle,就通过currentStyle属性获取样式,不支持,就通过window.getComputedStyle方法获取样式
function getStyle(*element*) {
// 方法1
/* if (element.currentStyle) {//返回对象,隐式转换为true
// IE低版本
return element.currentStyle
} else {//返回undefined,隐式转换为false
return window.getComputedStyle(element)
} */
// 方法2
// return element.currentStyle ? element.currentStyle : window.getComputedStyle(element);
// 方法3
return *element*.currentStyle || window.getComputedStyle(*element*)
}