JavaScript_下_Dom
Dom对象
Dom对象:Document Object Model 文档对象模型。js是用来操作html的。
一个文档必须被加载到浏览器中,会按照HTML的层级结构转换成一个“家谱树”称为dom树。HTML文档里的所以的标签,属性,文本都会转换成dom树上的节点。
- Element :是Html标签转换成的节点
- Attribute :标签的属性转换成的节点,它不是Element的子节点,是依附在Element节点上的。
- Text :文本转换成的节点
操作HTML标签
1、获取标签
- document.getElementById(id值); 获取一个Element对象;
- document.getElementsByName(name值);获取一批Element对象;
- document.getElementsByTagName(标签名称);获取一批Element对象;
- document.getElementsByClassName(class名称);获取一批Element对象;
2、操作标签
创建标签:创建出来的标签,不在dom树里,所以不会显示到页面上。
document.createElement("标签");
插入标签
子标签对象.innerHTML="内容";//给子标签体添加内容 父标签对象.document.appendChild(子标签对象");
删除标签
标签对象.remove();
操作标签体(开始标签与结束标签的内容)
- 先找到标签对象
- 获取标签体
操作标签体(覆盖式的操作)
获取标签体对象:标签对象.innerHTML 设置标签体:标签对象.innerHTML=“....” 设置文本:标签对象.innerText=“....”
操作属性
- 获取属性
- var 属性值=element.属性名
- var 属性值=element.getAttribute(“属性名”);
- 设置属性
- element.属性名=“…”
- element.setAttribute(“属性名”,”新值”);
- 删除属性
- element.removeAttribute(“属性名”);
js的九个内置对象(引用数据类型)
- Js Array
- JS Boolean
- JS Date
- JS Math
- JS Number
- Js String
- JS RegExp
- JS Functions
- Js Events