JS 添加元素/属性/文本节点和一些jquery的小技巧

2019独角兽企业重金招聘Python工程师标准>>>

元素节点

    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')

转载于:https://my.oschina.net/sallency/blog/552034