目前在系统的学习javascript,特总结下:
1、增加
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点');创建新的注释节点
document.createDocumentFragment( );创建文档片段节点
parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );给元素增加属性节点
element.setAttribute( attributeName, attributeValue );给元素增加指定属性,并设定属性值
document.createTextNode('新增文本内容');
element.innerHTML='新增文本内容'; 【推荐】
element.innerText='新增文本内容'; 【推荐】
2、删除
parentNode.removeChild( existingChild );删除已有的子节点,返回值为删除节点
element.removeAttribute('属性名');删除具有指定属性名称的属性,无返回值
element.removeAttributeNode( attrNode );删除指定属性,返回值为删除的属性
3、修改
parentNode.replaceChild( newChild, existingChild )
element.setAttributeNode( attributeName )
element.setAttribute( attributeName, attributeValue )
注意:修改样式 *.style.xxx=vvv或者setAttribute
修改文本:
* innerHtml
* innerText
* nodeValue
修改属性
*.xxx=vvv
setAttribute
4、查询(获取元素)
1、标准DOMAP
document.getElementById('id属性值');返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');返回所有匹配的元素
document.documentElement;获取页面中的HTML标签
document.body;获取页面中的BODY标签
document.all[''];获取页面中的所有元素节点的对象集合型
2、亲属访问
element.parentNode
element.childNodes
element.attributes[];获取元素列表
element.firstChild
element.lastChild
element.firstElementChild
element.lastElementChild
element.nextSibling
element.previousSibling
element.nextElementSibling
element.previousElementSibling
3、属性访问
getAttributeNode;获取属性节点
hasAttributes(); 是否有属性
nodeValue;节点内容(所有节点都有此属性body为null)
nodeName;节点名字(文本节点返回
document.nodeType ;节点类型
1 元素节点 2 属性节点 3 文本节点 11 代码片段
实例1
var div=document.querySelectorAll("#dv")[0];
div.setAttribute("a","a");
div.className = "b";
var attr = document.createAttribute("c");
attr.nodeValue = "d";
div.setAttributeNode(attr);
实例2
单属性:一定设置为ture或者false 不能为checked 或者直接删除属性节点
var radio = document.querySelectorAll("#rd")[0];
radio.removeAttribute("checked");
var attr_1 = radio.getAttributeNode("checked");
radio.removeAttributeNode(attr_1);
radio.checked = true;
实例3
/**
* 创建一个4*4的表格
*/
var body = document.body;
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i=0;i<4;i++){
var tr = document.createElement("tr");
for (var j=0;j<4;j++) {
var txt = document.createTextNode(i+"-"+j);
var td = document.createElement("td");
td.appendChild(txt);
tr.appendChild(td);
td.width=200;
td.height = 50;
}
tbody.appendChild(tr);
}
table.border="1";
body.appendChild(table);