元素节点
createElement
appendChild removeChild
parentNode 直接父元素 jquery的parent()
childNodes 直接子元素 jquery的 children()
#创建属性节点
var form = document.createElement('form');
form.action = "index.php";
form.method = "post";
form.name = "myform";
#挂载属性节点
document.body.appendChild(form);
var input = document.createElement('input');
input.type = "text";
input.name = "username";
input.placeholder = "please input your name";
input.style.cssText = "border:1px solid #ccc;border-radius:5px 5px;";
input.style.display = "block";
# document.forms['myform'] / document.forms[index] / document.myform
document.myform.appendChild(input);
#提交
document.myform.submit();
#删除元素节点 removeChild(childObj)
document.body.removeChild(document.myform);
#删除自己时还可以这样写 通过parentNode获取父元素然后删除自己
var myform = document.myform;
myform.parentNode.removeChild(myform);
属性节点
setAttributeNode(attrNode) 为当前元素添加新的节点属性
setAttribute(attrName, value) 为固有或以存在的属性设置值
=========================================
getAttributeNode(attrName) 获取属性节点 返回对象
getAttribute(attrName) 获取属性节点值 返回字符串
=========================================
removeAttribute(attrName) 通过属性名删除属性节点
removeAttributeNode(attrNode) 通过获取到的属性节点对象删除属性节点
#创建属性节点
var attr = document.createAttribute("data-type");
attr.value = "login";
# setAttributeNode(attrNode) 添加属性节点
document.myform.setAttributeNode(attr);
# setAttribute(attrName, val) 设置某属性节点的值
document.myform.setAttribute('action', 'hacker.php');
# getAttributeNode(attrName) 获取到的是属性节点
var dataType = document.myform.getAttributeNode('data-type');
dataType.value = "register";
# getAttribute(attrName) 获取属性的值 固有属性可以直接通过访问对象的方式获取 id name value title .....
var dataTpeVal = document.myform.getAttributeNode('data-type'); //register
#removeAttribute(attrName) 删除属性名为attrName的属性节点
document.myform.removeAttribute('data-type');
#removeAttributeNode(attrNode) 删除某对象的某属性节点对象
var dataType = document.myform.getAttributeNode('data-type'); #dateType为属性节点对象
document.myform.removeAttributeNode(dataType); #删除这个属性节点对象
文本节点
#创建一个文本节点
var desc = document.createTextNode("this is a description.");
#把文本节点挂载p标签上
var p = document.createElement('p');
p.appendChild(desc);
document.myform.appendChild(p);
#类名
document.myform.className = "login";
console.log(document.myform.className);
Jquery的技巧
attr( attrName, value / callback )
attr 可以获取和设定元素的属性值,在设定时可以直接指定值也可以使用回调函数
回调函数的参数分别是符合选择器的元素的索引和原始属性值
$("a").attr("index", function(index, origin) {
return "this is " + index;
});
addClass / removeClass 并不会覆盖或删除原有类 是在原有类的基础上增加或删除
$('a').addClass('clasName');
$('a').removeClass('clasName')
#全删
$('a').removeAttr('class');
#覆盖添加
$('a').attr('class', 'newClass');
$('a').attr('class', function(i, org) {
return "link_" + i;
});// class='link_0' class='link_1' class='link_2'
remove() / empty() 删除选择的元素/清空选择元素的子元素
#remove会删除选定元素
$('a').remove();
$('a').remove(".del");//二次赛选
#empty清空子元素
$("#content").empty();
replaceWith()/ replaceAll()
# A replaceWith B B 可以是我们临时创建的对象或者已存在的对象 B 会跑过去占据 A 的位置
$("p").replaceWith("<p>this is a new passage.</p>");
#个人觉得这样写更规范些 毕竟使用某对象去替换选定的元素才恰当
$("p").replaceWith($("<p>this is a new passage.</p>"));
$("p.first").replaceWith($("p.second"));
# B replaceAll A B 可以是我们临时创建的对象或者已存在的对象 B 会跑过去占据 A 的位置
#用 .... 替换所有的p元素
$("<p>this is a new passage.</p>").replaceAll("p");//
$("<p>this is a new passage.</p>").replaceAll($("p"));
jquery创建元素 属性 文本节点
#元素文本一部到位 这其实是将以dom对象转化为jquery对象的填充法
var p = $("<p>this is a passage</p>");
#将jquery对象转化为dom对象
var pDom = p[0];
var pDom = p.get(0);
#添加属性节点
p.attr("data-type", "desc");
#读取
p.attr("data-type");
#删除
p.removeAttr('data-type')