Dom对象

最新推荐文章于 2024-10-03 20:14:40 发布

2201_75694264

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量782

点赞数 19

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/2201_75694264/article/details/142530893

版权

节点名称：obj.nodeName

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 是属性的名称

文本节点的 nodeName 永远是 #text 元素节点的文本内容

节点类型：obj.nodeType

nodeType 属性规定节点的类型

元素节点的 nodeType 是 1

属性节点的 nodeType 是 2

文本节点的 nodeType 是 3

节点值：obj.nodeValue

元素节点的 nodeValue 是 null

文本节点的 nodeValue 是文本自身

属性节点的 nodeValue 是属性的值

获取节点对象

获取节点

1.通过id获取

document.getElementById("ID")

2.tongguobiaoqian

document.getElementsByTagName("标签名称")

document.getElementsByClassName("类名");

document.getElementsByName("name属性值")

document.querySelector();

document.querySelectorAll();

获取属性

属性节点包括：clsaa，id，style，name等

obj.attributes[0|'id']; //获取对象的所有的属性的集合

obj.getAttribute(“id”); //获取指定属性名的属性值

obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点

获取文本节点

var obj=document.getElementById("mydiv"); 
for(var i=0;i<obj.childNodes.length;i++){
  if(obj.childNodes[i].nodeType==3){
    document.write(obj.childNodes[i].nodeType+"<br>");
  }
}

取其他节点获取父，子节点和同胞节点对象

节点对象.parentNode //父节点
节点对象.childNodes //获取子节点
节点对象.children //获取元素中的子元素对象，不要文本
节点对象.firstChild //获取第一个子节点
节点对象.firstElementChild //获取第一个子节点，不要文本
节点对象.lastChild //获取最后一个子节点
节点对象.lastElementChild //获取最后一个子节点，不要文本
节点对象.previousSibling //获取前一个兄弟元素节点
节点对象.previousElementSibling //获取上一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.nextSibling //获取下一个兄弟元素
节点对象.nextElementSibling // 获取下一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.elements // 返回包含表单中所有元素的数组获取及设置元素节点对象属性

获取及设置元素节点对象属性

获取元素对象属性：
- 方法1：元素对象.属性名 [class需要使用className]，仅限于当前标签存在的属性，自定义不可以使用
- 方法2：元素对象.getAttribute('属性名')
- 方法3：元素对象.dataset.index【dataset是H5新增的属性】
设置元素对象属性：
- 方法1：元素对象.属性名='属性值'
- 方法2：元素对象.setAttribute('属性名','属性值')
- 方法3：元素对象.dataset.index = '01' （通过dataSet新增自定义属性，一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性）
- 元素对象.dataset.defaultColor
移除元素对象属性： removeAttribute("name")
- delete 元素对象.dataset.XXX

案例：获取属性值

<div id='id1' class="active div1" style='color:red'>hello</div>
<script>
    var div = document.querySelector('#id1');
    console.log(div.id);
    console.log(div.className);
    console.log(div.classList); // 可读
    div.classList.add('show');// 添加
    div.classList.remove('div1');// 删除
    console.log(div.style);
</script>

案例：点击按钮设置data-XX 或者获取data-XX的数据

var oLabel = document.querySelectorAll('.content label');
var num = 1;
for(var i=0;i<oLabel.length;i++){
  oLabel[i].onclick = function(){
    this.dataset.index = ++num; // 设置
    this.setAttribute('data-index',num); // 设置
    console.log(this.dataset.msg); // 获取data-msg
  }
}

自定义属性格式

定义： data-名称xxx

获取方法： this.dataset

obj.dataset.名称

<div data-id="1001" data-class="java"></div>

获取：obj.data.id obj.data.class

删除：obj.removeAtrribute("属性名")；

delete.obj.dataset.class

delete针对自定义属性

获取及设置元素节点对象内容

元素对象.innerHTML（从开始标签-结束标签包括html标签）
元素对象.outerHTML（innerHTML的全部和标签本身）
元素对象.innerText（只获取元素总的文本内容）
表单元素对象.value

节点对象操作

创建节点

方法	描述
createElement(tagName)	创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点例如：node_h1=document.createElement(“h1”)
createTextNode(text)	创建包含文本text的文本节点，返回得到的节点如：node_text=document.createTextNode(“hello”)
appendChild(node)	向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text)
insertBefore(new,current)	在current节点前插入new节点。 parentNode.insertBefore(new,current)