DOM:document object model。
定义:网页就是一个document,可以利用chrome的开发者工具观察到,各种标籤都是element。
document.querySelector('.选择器或是标籤')
:当我们在.js档中,填入本行程式码,并输入想编辑的选择器或是标籤,就可以利用;如果有多个相同
的标籤,则只会选取第一个
。
let el = document.querySelector('.navbar');
document.querySelectorAll('.选择器或是标籤')
:可以同时选取多个相同的标籤
,并以阵列型态呈现;如想利用API进行编辑需用阵列方式如,el[0]
进行。
简单应用
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);
let el = document.querySelector("table");console.log(el);el.setAttribute("class", "red");
element.getAttribute(name, value);
:可以用获取标籤的内部属性之值,例如class
、herf
let el = document.querySelector("th");console.log(el);
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);
反查document.querySelector
作用在DOM的节点位置:
有时因为需要,所以查询作用的节点位置(标籤),此时可以利用nodeName
。
let el = document.querySelector(".button");console.log(el.nodeName); //INPUT