1、获取节点
1.1、用 getElement 方法获取
获取元素节点时,必须等到DOM树加载完成后才能获取。两种处理方式:(1)将JS写在文档最后;(2)将代码写入window.onload函数中;
//通过ID来查看元素属性 var li = document.getElementById("first"); //通过类名来查看元素属性,返回元素数组 var lis1 = document.getElementsByClassName("cls"); //通过名字来查看元素属性,返回数组 var lis2 = document.getElementsByName("name"); //通过标签名来查看元素属性,返回数组 var lis3 = document.getElementsByTagName("li");
这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点的子节点里,选择需要的节点:
document.getElementById("div1").getElementsByTagName("li")[0];
1.2、用 querySelector 方法获取
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
var dq1 = document.querySelector("#id");
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。
var dqs1 = document.querySelectorAll("#div1 li");
2、查看设置属性(getAttribute、setAttribute)
attributes: 获取当前节点的所有属性节点。 返回数组格式。
document.getElementsByTagName("a")[0].getAttribute("target"); //element.setAttribute("属性名","属性值"); document.getElementsByTagName("INPUT")0].setAttribute("type","button");
3、设置样式
使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
使用 className设置元素类名
document.getElementById("first").className = "class1";
使用 style 样式 直接修改单个样式。注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";
使用 style 或 style.cssText 设置样式:
// IE不兼容 document.getElementById("first").style = "color:red;"; //cssText 属性用于设置或者返回元素声明的内联样式。 document.getElementById("first").style.cssText = "color:red;";
4、设置文本节点
innerHTML:取到或设置一个节点中的HTML代码。
innerText:取到或设置一个节点中的文本,会判断HTML标签样式,如果该标签隐藏,则该标签文本不会输出
<div class="container"> aaaa <h1 class="h1 h2">container里的标题1</h1> <h2 style="display: none">隐藏内容</h2> bbbb </div>
let cont = document.getElementsByClassName('container')[0]; console.log(cont.innerHTML); //输出: // aaaa // <h1 class="h1 h2">container里的标题1</h1> // <h2 style="display: none">隐藏内容</h2> // bbbb console.log(cont.innerText); //输出: //aaaa //container里的标题1 //bbbb console.log(cont.textContent); //输出: //aaaa // container里的标题1 // 隐藏内容 // bbbb
5、父子同胞节点
5.1、关于子节点的操作
childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。
children: 获取当前节点的所有元素子节点(不包含文本节点)。
firstChild: 获取第一个子节点,包括回车等文本节点;
firstElementChild: 获取第一个元素节点。 不含文本节点;
lastChild: 获取最后一个子节点,包括回车等文本节点;
lastElementChild: 获取最后一个子节点,不含文本节点;
5.2、关于父节点的操作
parentNode: 获取当前节点的父节点。
5.3、关于同胞节点的操作
previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;
previousElementSibling: 获取当前节点的前一个元素兄弟节点;
nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;
nextElementSibling:获取当前节点的后一个元素兄弟节点;
6、创建新增、删除替换节点
6.1、创建元素节点
document.createElement("div"); //创建元素节点
6.2、创建文本节点
document.createTextNode(text) var btn=document.createTextNode("Hello World");
6.3、添加节点
往父节点添加子节点
document.getElementById("myList").appendChild(newItem); //在父节点的末尾添加子节点 document.getElementById("myList").insertBefore(newItem,existingItem); //在父节点中的某一已存子节点前面添加节点 existingItem 是指父节点中已经存在的子节点,插入的新节点就插在这个子节点的位置
6.4、删除节点
父节点.removeChild(子节点): 从父节点中,删除指定子节点。
父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。