一.节点
DOM中所有的内容都是节点
1.每个html元素为元素节点
2.每个html元素的属性为属性节点
3.html里的文本为文本节点
二.获得元素节点对象
1.document.getElementById(“id”);
通过id(唯一)来找到html元素即获取元素节点 返回元素对象
2.document.getElementByName(“name”);
通过name来找到元素节点,由于name不唯一所以返回元素对象数组,数组里每个值为对应的元素对象
3.document.getElementByTagName(“p”);
通过标签来找到元素节点,同理由于标签不唯一所以返回元素对象数组
4.document.getElementByClassName(“classname”);
通过class的值找到元素节点,同理返回元素对象数组
三.修改元素节点内的文本节点
1.innnerText(“”);
例子:document.getElementById(“id”).innerText(“修改后的内容”);
2.innerHTML(“”);
例子:document.getElementById(“id”).innerHTML(“
修改后的内容
”);
区别:innerText只能写纯文本,而innerHTML可以包含html标签,功能更强大
四.获得或修改属性节点的值
1.修改属性节点的值
setAttribute(“name”,“value”); 第一个name为属性节点的名称,第二个value为修改后的内容
例子:document.getElementById(“id”).setAttribute(“href”,“https”
//www.baidu.com
“);
2.获得属性节点的值
(1)getAttribute(“name”); name为属性节点的名称
例子:document.getElementById(“id”).getAttribute(“title”);
(2)获得元素节点后可以直接获取属性节点
例子:获取超链接的地址
document.getElementByTagName(“a”).href;
五.改变css样式
document.getElementById(“id”).style.property=“新样式”
例子:document.getElementById(“id”).style.backgroundcolor=“red”;
例子2:设置隐藏和可见
document.getElementById(“id”).style.visibility=“hidden”/“visiable”;
六.动态创建节点
1.动态创建元素节点
document.createElement(“标签名”);
例子1:创建p标签
document.createElement(“p”)
例子2:创建按钮
var btn = document.createElement(“input”);
btn.type=“button”;
btn.value=“按钮”;
btn.onclick = function(){
alert(“这是一个按钮”);
}
2.动态创建文本节点
document.createTextNode(“文本值”);
例子:document.createTextNode(document.getElementByTagName(“input”).value);
3.为元素节点添加子节点
(1)父元素.appendChild(子元素); 只能添加到父元素的最后一个子元素的后面
括号里没有双引号
例子: var td = document.createElement(“td”);
var tr = document.getElementById(“tr”);
tr.appendChild(td);
(2)父元素.insertBefore(任意子节点,要插入的子节点); 会添加到指定的子节点的前面
同样括号里两个值没有双引号
例子: var td2 = document.getElementById(“td2”); //找到指定的子节点
var td3 = document.createElement(“td”); //创建新的节点
td2.parentElement.insertBefore(td2,); //将新节点添加到指定子节点前面
4.删除节点 父元素.removeChild(要删除的子节点);
var tbody = document.getElementById(“body”); //获取父元素
var tr = document.getElementById(“tr”); //获取要删除的子节点
tbody.removeChild(tr)
七.正则表达式 又称为规则表达式
var teg = /正则表达式/;
var txt = document.getElementById(“text”).value; //获取文本框的值
teg.text(txt); //判断是否符合正则表达式,符合返回true,否则返回false
八.杂项
1.dom中比较常用的属性
(1)nodeName
获取节点的名称 元素节点和属性节点为其本身,文本节点为#text无意义
nodeValue
获取节点的值 属性节点为属性值,文本节点为文本值,元素节点无意义
(2)childNodes 获取节点全部子元素,返回节点对象数组
(3)parentElement 获取父元素对象
(4)firstChild 获取第一个子元素对象
lastChild 获取最后一个子元素对象
2.事件(暂时不全)
(1)点击事件 onclick 鼠标点击时触发(按钮等)
为按钮添加点击事件
btn.onclick = function(){}
另外在按钮属性添加单击事件为 onclick = “return 方法()”
在表单属性中添加事件为onsubmit = “return 方法()”;
(2)发生改变事件 onchange 当元素发生改变时触发 (复选框、单选按钮等)
为复选框添加发生改变事件
check.onclick = function(){}
3.获取下拉列表框被选中的值
(1)获取下拉列表对象
var selectd = document.getElement(“id”);
(2)获取下拉列表框被选中的索引
var index =selected.selectedIndex;
(3)根据索引获取下拉列表框被选中的值
var value = selected.options[index].value;
4.deleteRow(index) 删除一行 index为下标索引,可用于删除表格中的一行