javascript中DOM相关

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.样式名 = “新值”; //修改设置行内样式

   注意：  如果是由多个单词构成的样式属性名，我们应该使用小驼峰形式给出其值。

设置任意样式

1. 直接通过修改类名方式实现，如下：

ele.className="newClassName";【推荐使用】

这样方式在配合行内样式的修改方式，可以达到修改任意样式的目的。