JS添加元素属性⽂本节点和⼀些jquery的⼩技巧元素节点
createElement
appendChild removeChild
parentNode 直接⽗元素 jquery的parent()
childNodes 直接⼦元素  jquery的 children()
#创建属性节点
var form = ateElement('form');
form.action = "index.php";
form.name = "myform";
#挂载属性节点
document.body.appendChild(form);
var input = ateElement('input');
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] / form
#提交
#删除元素节点 removeChild(childObj)
form);
#删除⾃⼰时还可以这样写通过parentNode获取⽗元素然后删除⾃⼰
var myform = form;
veChild(myform);
属性节点
setAttributeNode(attrNode) 为当前元素添加新的节点属性
setAttribute(attrName,  value) 为固有或以存在的属性设置值
=========================================
getAttributeNode(attrName) 获取属性节点 返回对象
getAttribute(attrName) 获取属性节点值 返回字符串
=========================================
removeAttribute(attrName) 通过属性名删除属性节点
removeAttributeNode(attrNode) 通过获取到的属性节点对象删除属性节点
#创建属性节点
var attr = ateAttribute("data-type");
attr.value = "login";
# setAttributeNode(attrNode) 添加属性节点
# setAttribute(attrName, val) 设置某属性节点的值
# getAttributeNode(attrName) 获取到的是属性节点
var dataType = AttributeNode('data-type');
dataType.value = "register";
# getAttribute(attrName) 获取属性的值固有属性可以直接通过访问对象的⽅式获取 id name value title .....
var dataTpeVal = AttributeNode('data-type'); //register
#removeAttribute(attrName) 删除属性名为attrName的属性节点
#removeAttributeNode(attrNode) 删除某对象的某属性节点对象
var dataType = AttributeNode('data-type'); #dateType为属性节点对象
⽂本节点
#创建⼀个⽂本节点
var desc = ateTextNode("this is a description.");
#把⽂本节点挂载p标签上
var p = ateElement('p');
p.appendChild(desc);
#类名
console.form.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在一个元素后追加标签
#将jquery对象转化为dom对象
var pDom = p[0];
var pDom = p.get(0)；
#添加属性节点
p.attr("data-type", "desc");
#读取
p.attr("data-type");
#删除

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。