2019-04-23
DOM模型的全称是Document Object Module，即文档对象模型。一个HTML文档可以看成结构化的树，文档中的每个标签都是树的结点。
引用DOM结点
直接引用DOM结点
在DOM模型中直接引用结点有以下方式：
document.getElementById：引用指定id的结点
document.getElementsByName：引用指定name的结点，返回值类型为数组。
document.getElementsByTagName：引用指定标记的结点。不必非得用在document上。可以在某个特定元素的子节点中定位。返回值类型为数组。
document.querySelector: 根据指定css规则，返回在页面中找到的第一个匹配元素
document.querySelectorAll: 根据指定css规则返回页面中所有相匹配的元素，返回值类型为数组。
document.getElementsByClassName：根据class名称查找所有元素，返回值类型为数组。
间接引用DOM结点
引用子结点
每个结点都有childNodes属性，表示该结点的所有子结点。这些子结点按照在文档中出现的顺序排列，可通过索引访问。
if(document.getElementById("d1").hasChildNodes()){
var arr = document.getElementById("d1").childNodes;
for(let i=0;i<arr.length;i++){
arr[i].src="images/photo.gif";
}
}
删除因排版问题而产生的空白节点
function clearWhitespace(element){
for (let i = 0; i < element.childNodes.length; i++) {
let node = element.childNodes[i];
//判断是否是空白文本结点(nodeType返回3为文本结点), 是则删除
// nodeType 1:元素节点 2：属性节点 3：文本节点
if (node.nodeType == 3 && /\s/.test(node.nodeValue)) { // \s是空白字符
node.parentNode.removeChild(node);
}
}
}
clearWhitespace(document.getElementById("d1"));
firstChild：第一个子结点
document.getElementById("d1").firstChild.src ="images/photo.gif";
lastChild：最后一个子结点
document.getElementById("d1") .lastChild.src ="images/photo.gif";
引用父结点
parentNode
obj.parentNode.style.backgroundColor = "green";//获取obj元素的父元素
引用兄弟结点
nextSibling：引用下一兄弟结点
obj.nextSibling.style.background = "red";
previousSibling：引用上一兄弟结点
obj.previousSibling.style.background = "green";
操作DOM结点
获取结点名称 nodeName
用于返回节点的标记名称，与tagName属性相同。
获取结点类型 nodeType
对应3种类型的结点，nodeType以数字形式返回其类型：1-元素结点 2-属性结点 3-文本结点
获取结点值 nodeValue
不同类型结点有不同的返回值：
元素结点：返回null;
属性结点：返回undefined;
文本结点：返回文本内容。
nodeValue属性可以看作是专门为文本结点所设置的。可用于读写文本内容。
<body>
<div id="d1">hello</div>
<script type="text/javascript">
var d1 = document.getElementById("d1");
alert(d1.nodeValue);//返回null
</script>
</body>
---------------------------------------------------------------------------------------------------
<body>
<div id="d1">hello</div>
<script type="text/javascript">
var d1 = document.getElementById("d1");
alert( d1.firstChild.nodeValue ); //返回hello
</script>
</body>
读写结点属性
语法格式一：元素结点.属性名称
<img id="img1" src= "images/photo.gif" />
<script type="text/javascript">
var imgNode = document.getElementById("img1");
alert(imgNode.src); //读取src属性
imgNode.src = "images/001.jpg" //设置src属性
</script>
语法格式二：
setAttribute(属性名称,属性值);
getAttribute(属性名称);
<img id="img1" src= "images/photo.gif" />
<script type="text/javascript">
var imgNode = document.getElementById("img1");
alert(imgNode.getAttribute("src")); //读取src属性
imgNode.setAttribute("src", "images/001.jpg"); //设置src属性
</script>
说明：使用setAttribute()时，如果指定属性已经存在，它的值将被刷新；如果不存在，方法将先创建它再为其赋值。
处理结点内容
要获取一个结点内容有以下方法：
innerHTML属性
innerText属性（firefox支持textContent属性）
nodeValue属性
通过DOM结点改变文档结构
创建结点
1.创建元素结点
语法格式：document.createElement(结点名称);
返回指向新建节点的引用指针
2.创建文本结点
语法格式：document.createTextNode(text);
text是要创建的文本结点中的文本值
3.添加结点
创建结点后，可以使用appendChild方法将其添加到文档层次结构中，成为指定父结点的最后一个子结点。
语法格式：父结点.appendChild(新结点);
function createNode(){
var divObj = document.createElement("div");//创建元素节点
divObj.style.width="100px";
divObj.style.height="100px";
divObj.style.border="1px solid blue";
divObj.style.color = "red";
var txt = document.createTextNode("hello world"); //创建文本节点
divObj.appendChild(txt); //添加文本节点
document.body.appendChild(divObj); //添加元素节点
}
插入结点
使用insertBefore方法插入子结点
appendChild方法只能将结点添加到所有的子结点之后，而insertBefore方法则可以将结点插入到指定结点之前。
语法格式：父结点.insertBefore(新结点,原结点);
说明：新结点插入到原结点之前的位置
替换结点
使用replaceChild方法替换结点
将一个结点用另外一个结点来取代
语法格式：父结点.replaceChild(新结点,原结点);
说明：用新结点替换原结点，并返回被替换掉的结点，此时这个结点已经不存在于文档中。
复制结点
使用cloneNode方法复制结点
语法格式：结点.cloneNode(true|false);
说明：
true表示克隆整个结点，false表示只克隆结点标记 ，里面的子结点不克隆。
返回值是复制得到的新结点。
如果克隆后的结点与原结点id一样，不要忘记用 setAttribute("id" , "new_id") 改变新节点的ID。
删除结点
使用removeChild方法删除子结点
语法格式：父结点.removeChild(子结点);
说明：
方法返回被删除的子结点的引用。
某个节点被removeChild方法删除时，这个节点所包含的所有子节点将同时被删除。
表格操作
table表格对象
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | rows[] | 返回包含表格中所有行的一个数组 |
| 方法 | insertRow(index) | 在表格中插入一个新行。新行将被插入 index 所在行之前。<br />若 index 等于表中的行数，则新行将被附加到表的末尾。 |
| deleteRow(index) | 从表格中删除一行 |
tableRow表格行对象
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | cells[] | 返回包含行中所有单元格的一个数组 |
| rowIndex | 返回该行在表中的位置 | |
| 方法 | insertCell(index) | 在一行中的指定位置插入一个空的<td>标签。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。 |
| deleteCell(index) | 删除行中指定的单元格 |
tableCell单元格行对象
| 名称 | 描述 |
|---|---|
| cellIndex | 返回单元格在某行单元格集合中的位置 |
| innerHTML | 设置或返回单元格的开始标签和结束标签之间的HTML |
| align | 设置或返回单元格内部数据的水平排列方式 |
| className | 设置或返回元素的class属性 |
网友评论