1.DOM(document object model)文档对象模型
当网页被加载时,浏览器会创建页面的文档对象
通过DOM可以访问JavaScript文档中所有的元素
2.javascript能够改变页面中所有的HTML元素
JavaScript能够改变所有的HTML属性
JavaScript能够改变所有css样式
JavaScript能够对页面中所有的时间做出反应
2.js中的DOM改变页面中内容的步骤
1.获取HTML元素(三种方法)
(1)通过id来获取HTML元素
document.getElementById("id名");
(2)通过class来获取HTML元素
document.getElementByClassName("class名")
(3)通过标签名来获取HTML元素
documnet.getElementByTagName("标签名");
2.改变HTML内容
document.getElementById('id名').innerText="修改的内容"
3.根据元素选择器来获取元素,获取到的都是伪数组
document.querySelector(''选择器名") 只能获取到第一个标签
document.querySelector("选择器名")获取到所有匹配上的节点
3.非标签的节点操作
1.nextString 获取下一个兄弟节点
var b1=documnet.getElementById('box');
var b2=b1.nextString;
2.nextElementSibling 直接获取下一个标签
var b3=b1.nextElementSibling;
console.log(b3);
3.直接获取上一个标签 previousElementSibling
var b1=documnet.getElementById('box');
var b2=b1.previousElementSibling;
console.log(b2);
4.获取最后一个子节点 lastChild
consloe.log(fbox.lastChild)
5.获取最后一个标签节点
consloe.log(fbox.lastElementChid)
6.获取所有的子元素 children 获取到的是一个伪数组
console.log(fbox.children);
7.获取父节点 parentNode
console.log(b1.parentNode);