为了转生而点技能-JavaScript,day25(DOM介绍

DOM:document object model。

定义:网页就是一个document,可以利用chrome的开发者工具观察到,各种标籤都是element
http://img2.58codes.com/2024/20143762S2GZzlFW05.jpg

document.querySelector('.选择器或是标籤'):当我们在.js档中,填入本行程式码,并输入想编辑的选择器或是标籤,就可以利用;如果有多个相同的标籤,则只会选取第一个

let el = document.querySelector('.navbar');

http://img2.58codes.com/2024/201437627HkVmusBsG.jpg

document.querySelectorAll('.选择器或是标籤'):可以同时选取多个相同的标籤,并以阵列型态呈现;如想利用API进行编辑需用阵列方式如,el[0]进行。
http://img2.58codes.com/2024/20143762lo54BtHLYe.jpg


简单应用

element.textContent :变更目标选择器或是标籤的文字内容

let el = document.querySelector('.选择器或是标籤');el.textContent = 'CCC';      //变更目标选择器或是标籤的文字内容为CCC

element.innerHTML:会先删掉html的预设元素,再新增html标籤元素

let el = document.querySelector('.选择器或是标籤');el.innerHTML = '<h1>new标题</h1>';

element.insertAdjacentHTML(position, text);:在4个可以自行选择的位置中,插入想要的标籤及内容

<!-- beforebegin -->      //位置1<p>  <!-- afterbegin -->     //位置2  foo  <!-- beforeend -->      //位置3</p><!-- afterend -->         //位置4
let el = document.querySelector('.选择器或是标籤');el.insertAdjacentHTML('beforebegin', '<h1>new标题</h1>');;

element.setAttribute(name, value);:name为属性名称,value为属性值;可以针对目标标籤的属性作编辑。

let el = document.querySelector("table");console.log(el);

http://img2.58codes.com/2024/20143762mavg0g5bX3.jpg

let el = document.querySelector("table");console.log(el);el.setAttribute("class", "red");

http://img2.58codes.com/2024/20143762rEkPR5pBRZ.jpg


element.getAttribute(name, value);:可以用获取标籤的内部属性之值,例如classherf

let el = document.querySelector("th");console.log(el);

http://img2.58codes.com/2024/20143762njzMm0Sxjr.jpg

console.log(el.getAttribute("class"));     //red
console.log(el.innerHTML);                 //<span>内容</span>console.log(el.textContent);               //内容

表单取值

//html<input type="text" class="txt" value="E-mail">//.jslet el = document.querySelector(".txt");console.log(el);console.log(el.value);   el.value = '联络资讯';   //赋予新的值console.log(el.value);

http://img2.58codes.com/2024/20143762RJfTll68Xl.jpg


反查document.querySelector作用在DOM的节点位置:

有时因为需要,所以查询作用的节点位置(标籤),此时可以利用nodeName

let el = document.querySelector(".button");console.log(el.nodeName);   //INPUT

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章