1.使用DOM获取元素
1.getElementById(id) 通过元素id名获取元素
例:获取id名为box的元素
document.getElementById(“box”);
2.getElementsByTagName 通过标签名获取元素列表(数组)
例:获取所有的li标签
document.getElementsByTagName(‘li’);
获取所有的标签
document.getElementsByTagName(“*”);
ie9以下会多出节点 会被当成是一个节点
3.getElementsByName 通过元素name属性值获取元素列表(数组)
name属性常被定义在哪些元素中:
form,input,select,textarea,a,button,img…
例:获取name属性值
var name1=document.getElementsByName(“haha”);
获取input value值:name1.value
单选/复选框是否被选中:ipt.checked 对象名.属性名 获取当前对象是否被选中
2.DOM中节点对象的常用属性和方法
1 获取标签名
节点对象.tagName
2 获取或设置元素的内容
节点对象.innerHTML
2.1、innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
2.2、innerText:
从起始位置到终止位置的内容, 但它去除Html标签
3 获取或设置元素的value值
节点对象.value
4 获取所有子节点——数组结构,包含空节点
节点对象.childNodes 或者 节点对象.children
4.1、childNodes:获取节点,不同浏览器表现不同;
IE:只获取元素节点;
非IE:获取元素节点与文本节点;
解决方案:if(childNode.nodeName==”#text”) continue 或者 if(childNode.nodeType != ‘3’) continue
4.2、children:获取元素节点,浏览器表现相同。
因此建议使用children
5 获取节点的节点名
节点对象.nodeName
6 获取节点的父节点
节点对象.parentNode
7 删除子节点
父节点对象.removeChild(子节点);
8 元素显示和隐藏有两种方式:
8.1 占位隐藏
元素对象.style.visibility
隐藏:hidden
显示:visible
8.2 不占位隐藏
元素对象.style.display
隐藏:none
显示:block
3.使用DOM对元素进行增删改查操作3.使用DOM对元素进行增删改查操作
一、【节点的查询】
1.所有子节点集合
节点对象.childNodes;
2.第一个子节点
节点对象.firstChild;
节点对象.childNodes[0]
3.最后一个子节点
节点对象.lastChild;
节点对象.childNodes[长度-1]
二、节点的新增
1.创建新节点:
var node=document.createElement(“标签名”);
返回值:返回一个新的节点对象
2.追加子节点:在最后一个子节点后追加节点
父节点.appendChild(子节点);
3.插入子节点:在指定的子节点前插入新节点
父节点.insertBefore(新节点,子节点);
三、节点的修改将指定的子节点修改为新节点
父节点.replaceChild(新节点,子节点);
四、点的克隆
节点对象.cloneNode(布尔类型数据)
参数:
true:克隆节点本身和所有子节点
false:克隆节点本身
返回值:克隆的新节点
五、节点的删除
删除子节点:删除父节点对应的子节点
父节点对象.removeChild(子节点);