Dom基础必记方法

88 阅读2分钟

Dom节点操作常用方法

1.访问/获取节点

document.getElementById(id);   //返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);  //返回带有指定名称的节点集合   注意拼写:Elements
document.getElementsByTagName(tagname);  //返回带有指定标签名的对象集合   注意拼写:Elements
document.getElementsByClassName(classname);  //返回带有指定class名称的对象集合 注意拼写:Elements

<input name="myInput" type="text" size="20" />
const x=document.getElementsByName("myInput");

const nodeDiv = document.getElementById('parentNodeId');
document.write(nodeDiv.parentNode.nodeName);
document.write(nodeDiv.childNodes[0].innerHTML); // aaa
document.write(nodeDiv.childNodes[0].innerHTML); // bbb
document.write(nodeDiv.firstChild.innerHTML); // aaa
document.write(nodeDiv.lastChild.innerHTML); // bbb
document.write(nodeDiv.lastChild.previousSibling.innerHTML); // bbb
document.write(nodeDiv.firstChild.nextSibling.innerHTML); // bbbb

2.创建节点/属性

const myNode = document.createElement("标签名"); //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text);   //创建文本节点

3、获取/设置/删除属性

// 获取属性
const myNode = document.getElementsByTagName("img")[0];
myNode.getAttribute("class")
myNode.getAttribute("src")
// 设置属性
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
// 删除属性
myNode.removeAttribute("class");
myNode.removeAttribute("id");
// 判断
node2.contains(node1) //node2中是否包含node1

4、添加节点

parentNode.insertBefore(新的子节点,作为参考的子节点);  //在某个节点前插入节点
parentNode.appendChild(新的子节点);  //给某个节点添加子节点

5、复制节点

cloneNode(true | false);  //复制某个节点  参数:是否复制原节点的所有属性
要复制的节点.cloneNode(true);

6、删除节点

parentNode.removeChild(node);  //删除某个节点的子节点 node是要删除的节点
node1.parentNode.removeChild(node1); // 如果我想删除自己这个节点,可以这么做

注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。

nodeType 属性可返回节点的类型.最重要的节点类型是:

元素类型节点类型
元素element1
属性attr2
文本text3
注释comments8
文档document9

7、样式

  • 属性选择器
  • E[attr]:只有属性ming
  • E[attr="value"]:属性名 属性值
  • E[attr~="value"]:属性名 属性值 空格隔开的都可以
  • E[attr^=value]:属性名 ,属性值 开头
  • E[attr$=value]:属性名,属性值结尾的
p[id^="one"]{
	color:pink;
	font-family:"微软雅黑";
	font-size:20px;	
}
input[type="email"] {
  color: papayawhip;
}
input[type="tel"] {
  color: thistle;
}
  • 清除浮动 必须是 块级元素
 内部加 一个标签 <p class="clearfix"> <p> .clearfiz{clear:both}\
 父级 加 ::after{content:'';display:block; clear:both}\
  • background(color/image/repeat/attachment/position/size)