DOM
Document Object Modern(文档对象模型)
1.DOM(document object modern文档对象模型)
2.DOM对象 (将html的元素转成的JS对象)
Eg:如果用js操作html文档,先要将html转成js DOM对象
<a href="http://www.sina.com” id=”link” title=”新浪”>新浪</a>
Var obj=document.getElementById(“link”); //获取dom对象
- 操作属性
DOM自带的属性如<a href=”” title=”” target=”_blank” id=”link”> link </a>
<p align=”center”></p>
- 操作内容
InnerText:操作内部的文本,任何标签只当做文本处理
兼容性:innerText(IE) textContent(FF)[兼容IE低版本的浏览器]
InnerHTML(荐 兼容性好):可带标签格式
兼容性:可同时兼容IE与FF
outerHTML取文本元素外围的标签
- 操作表单值:
Document.formname.elementname.value=…
Document.forms[0]. Elementname.value=…
Document.forms[0].Element[num].value=… //elements不用改变,照实写即可
- 操作样式
obj.style.textDecoration="none";
obj.style.fontSize="14";
obj.style.color="#000";
操作多个样式用
Obj.className=”stylename”
Obj.className=”style1 style2”
Obj.className=””//清空类
以上三点的操作,需要将标记(obj)转成对象
classsList[重要]
obj.classList.add(“样式名”)
obj.classList.remove(“样式名”)
obj.classList.toggle(“样式名”)
obj.classList.contains(“样式名”)
参考地址:
https://www.runoob.com/jsref/prop-element-classList.html
转成对象的两种形式
- 通过标记名(找多个)、ID(唯一)、name(多个)
Document中找到对象的三个方法
- Var objs=document.getElementsByTagName(“div”);
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
例如:var obj=document.getElementsByTagName("p"); //数组
- Var objs=document.getElementById(“one”);
获取的是拥有唯一的ID名称的DOM元素
例如:var obj=document.getElementsById("one");
Alert(obj.innerHtml)
- Var objs=document.getElementsByName(“two”) //数组
getElementsByName() 方法可返回带有指定名称的对象的集合
★找到dom的方法★
1:ID document.getElementById("ID名");
2:name document.form1.user.value; (表单)
document.forms[0].input[0].value
document.getElementsByName("name名")
3:TAG document.getElementsByTagName("标签名");
4:class document.getElementsByClassName("类名");
说明:
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
在节点树中,顶端节点被称为根(root)
每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
4.dom元素方法列表
5. nodeType属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有: