码迷,mamicode.com
首页 > 其他好文 > 详细

操作DOM

时间:2021-07-02 16:16:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:get   child   code   nbsp   css   区别   name   节点   class   

操作DOM节点,做常用的是document.getElementById() document.getElementsByTagName() , 以及css选择器document.getElementsByClassName();

document.getElementsByTagName()document.getElementsByClassName() 总是返回一组DOM节点。

 // 先定位ID为‘text-table‘ 的节点,再返回其内部所有tr节点
var trs = documet.getElementById(test-table).getElementsByTagName(tr);
// 先定位ID为‘test-table‘ 的节点,再返回其内部所有class包含red的节点
var reds = document.getElementById(test-div).getElementsByClassName(red)

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点
var first = test.firstElementChild;
var last = test.lastElementChild

 

第二种方法是使用querySelector() querySelectorAll(),

// 通过querySelector获取ID为q1的节点:
var q1 = document.querySelector(#q1);

// 通过querySelectorAll获取q1节点内的符合条件的所有节点:
var ps = q1.querySelectorAll(div.highlighted > p);

 

 

更新DOM

innerText 和 textConent 的区别:

读取属性时,innerText 不会返回隐藏元素的文本,而textContent 返回所有文本。

 

操作DOM

标签:get   child   code   nbsp   css   区别   name   节点   class   

原文地址:https://www.cnblogs.com/yongzhu/p/14962146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!