HTML DOM文档对象模型

  • Post author:
  • Post category:其他


一.节点

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为下标索引,可用于删除表格中的一行



版权声明:本文为weixin_43695637原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。