1、javascript是一门轻量级得语言,所以想要用它操作网页得话需要使用相应得接口DOM;
2、什么是DOM?
DOM( Document Object Model) 文档对象模型。
3、相关API
document.getElementById( ID名 );
document.getElementsByClassName( 类名 ); 得到得是数组
document.getElementsByTagName( 标签名 ); 得到得是数组
document.getElementsByName( name的值 );
document.querySelector("选择器");
document.querySelectorAll("选择器"); //查找到所有附和的标签元素,结果为一个NodeList。
4、操作内容
1)操作标签
获取元素内容 var content = ele.innerHTML;
修改元素内容:ele.innerHTML=”修改的内容”;
2)操作标签文本
获取元素内容:var content = ele.innerText;
修改元素内容:ele.innerText=”修改的内容”;
3)操作标签值(input)
步骤1. 先获取元素
var ele=document.getElementsByName(“name属性值”)[0];
步骤2. 通过元素获取value
获取元素value:var v= ele.value;
步骤3. 修改元素value
修改元素value:ele.value=”修改的内容”;
4)操作标签属性与事件
getAttribute(“属性名”);
setAttribute(“属性名”,”属性值”);
removeAttribute(“属性名”);
5)操作标签样式
获取行内样式:ele.style.样式属性名
设置行内样式:ele.style.样式名 = “新值”; //修改设置行内样式
注意: 如果是由多个单词构成的样式属性名,我们应该使用小驼峰形式给出其值。
设置任意样式
- 直接通过修改类名方式实现,如下:
ele.className="newClassName";【推荐使用】
这样方式在配合行内样式的修改方式,可以达到修改任意样式的目的。