html js dom 操作

查找 dom

var input = document.getElementById("user_id");
var input = document.getElementsByName("user_name");
var inputs = document.getElementsByClassName("user_class");
var inputs = document.getElementsByTagName("input");
var inputs = document.querySelectorAll("input.chooseCheckbox");

// dom 在html中通过 this 传递
<input id="user_id" onclick="doit(this)" />
function doit (obj) {
    obj  ===  document.getElementById("user_id")
}

获取 dom 的其他节点

var parent = element.parentNode;
var firstChild = element.firstChild;

删除节点

// 删除当前节点
element.remove();
// 删除当前节点的父节点
// 场景:根据td删除tr。
element.parentNode.remove();
// 父节点中删除子节点
element.removeChild(element1);

获取 / 设置元素的属性值

// 获取<input type="checkbox" checked="checked"  />,是否选中
var checked = element.getAttribute("checked");
var checked = element.checked;

// 设置<input type="checkbox" /> 的type值
element.setAttribute("type", "text");
element.type = "text";

// 设置 css
element.style.color = "#FFF";

html dom 互相转换,html 添加 dom

// dom 里添加一个 input
element.innerHTML + "<input />"

// 获取 dom 的 html
var html = element.innerHTML;

参考:http://www.fengyunxiao.cn

猜你喜欢

转载自blog.csdn.net/m0_37202351/article/details/84892315