DOM开篇
- 什么是DOM?
- 文档对象模型,是关于如何获取、修改、添加或删除 HTML 元素的标准
- 什么是document文档对象?
- 是系统提供的一个对象,这个对象就是DOM对象,这个对象以树的形式保存了界面上所有的内容
- 标签, 元素都是 HTML标签的称呼
获取界面上的元素
- 自定义对象
function Person() {}
var per = new Person();
- 内置对象
Array/String/Boolean/Number/...
- 宿主对象
- 简单的可以理解为浏览器提供的对象
- DOM和BOM中的对象都是宿主对象
通过标签名称获取界面上的元素
- 通过ID获取界面上的元素
- 会将id名称为指定名称的的元素返回给我们
- 注意点:如果id名称重复,返回的是第一个找到的元素(返回宿主对象)
var oDiv = document.getElementById("father");
console.log(oDiv);
console.log(oDiv);
- 通过类名获取界面上的元素
- 找到==所有==类名为指定名称的元素, 放到一个集合对象中返回给我们
- 这个集合对象是一个伪数组(对象)
- 注意点:有兼容性问题,IE9才支持
var oDiv = document.getElementsByClassName("son");
console.log(oDiv);
console.dir(oDiv);
- 通过标签名称获取界面上的元素
- 找到==所有==指定标签的元素, 放到一个集合对象中返回给我们
var oDiv = document.getElementsByTagName("div");
console.log(oDiv);
- 通过name属性名称来获取界面上的元素
- 注意点:在不同浏览器执行结果可能不同
- 找到==所有==指定name的元素
var oDiv = document.getElementsByName("pp");
console.log(oDiv);
- 根据选择器来获取界面上的元素
- CSS中所有的选择器都可以在这里使用
- 注意点:会返回第一个找到的元素
- IE8才能用
var oDiv = document.querySelector("div>.son");
console.log(oDiv);
var oDiv = document.querySelectorAll("div");//找到所有的
文档加载过程
- window.onload和将script标签写在body最后的区别:
- window.onload执行时,不仅DOM对象准备好了,网页上所有资源也都准备好了
- body后的script标签执行时, 仅仅代表DOM对象准备好了, 而网页上的其它资源不一定准备好
- 综上所述:body后的script标签的效率高于window.onload
节点
获取元素
- 获取子元素
var oDiv = document.querySelector(".son1");
console.log(oDiv);
- 通过子元素获取父元素
- 一般情况下在JS中带Element单词的属性或者方法都有兼容性问题
- parentElement: 获取父元素
- arentNode:获取父节点,拿到的不一定是一个元素(DOM节点(标签节点/属性节点/文本节点))
// var oDiv = document.querySelector(".son1");
var oDiv = document.querySelector("html");
var oFDiv = oDiv.parentElement; //null(父元素)
// var oFDiv = oDiv.parentNode; //#document(父节点)
console.log(oFDiv);
- 通过指定元素找到上/下一个元素
var oDiv = document.querySelector(".son1");
//上一个元素
// var oPDiv = oDiv.previousElementSibling || oDiv.previousSibling;
// console.log(oPDiv);
//下一个元素
var oNDiv = oDiv.nextElementSibling || oDiv.nextSibling;
console.log(oNDiv);
- 通过指定元素找到所有的子节点/子元素
var oDiv = document.querySelector("#father");
// var oCDiv = oDiv.childNodes;//[text, p, text, div.son1, text, p, text, div.son2, text]
var oCDiv = oDiv.children;// [p, div.son1, p, div.son2, hh: p, pp: p]
console.log(oCDiv);
节点之间的增删改查
- 创建一个元素:createElement
- 添加到界面上:
- appendChild()添加到指定元素中的末尾
- insertBefore(,)将第一个参数的元素插入到第二个参数元素的前面
- 删除指定的元素: parentNode.removeChild();只能通过父节点调用removeChild删除子节点
var oDiv = document.querySelector(".son1");
var oA = document.createElement("a");
// oDiv.appendChild(oA);
var op = document.querySelector(".pp");
oDiv.insertBefore(oA,op);
op.parentNode.removeChild(op);
节点属性的操作
- 获取取节点的属性
- 直接获取(通过DOM查询到对应的元素之后,返回给我们的是一个对象)
- 通过getAttribute方法获取
var oImg = document.querySelector("img");
// console.log(oImg.alt); //这是alt
// console.log(oImg.title); //这是title
// console.log(oImg.src); //http://localhost:63342/Js/%E7%BB%83%E4%B9%A0/images/ad1.jpg
// console.log(oImg.yzf); //undefined
console.log(oImg.getAttribute("src")); //images/ad1.jpg
console.log(oImg.getAttribute("title")); //这是title
console.log(oImg.getAttribute("alt")); //这是alt
console.log(oImg.getAttribute("yzf")); //hello
- 为什么系统要提供两种方式来获取元素的属性?
- 第一种方式 元素.属性 只能获取标签自带的属性
- 第二种方式元素.getAttribute(属性) 既可以获取自带的属性也可以获取自定义属性
- 删除属性
- 直接删除(不能删除自定义属性)
- 通过removeAttribute方法来删除
var oImg = document.querySelector("img");
oImg.alt = "";
oImg.removeAttribute("yzf");
- 设置属性的值
- 直接设置
- 通过setAttribute方法来设置
- 注意:有就修改,没有就新增
oImg.title = "修改后的title";
oImg.yzf = "修改后的yzf";//不能修改自定义属性
oImg.setAttribute("yzf", "修改后的yzf");
oImg.setAttribute("zx", "新增的zx属性")
innerHTML属性
- 作用:获取或者设置调用者中的内容
- 如果是获取,会原封不动的将调用者中的内容返回给我们(包含标签)
- 如果是设置,会利用设置的值覆盖调用调用者中所有的内容,如果设置的值中包含了HTML标签,也会解析创建之后再添加
var oDiv = document.querySelector(".son1");
console.log(oDiv.innerHTML);//<p class="pp">我是段落</p>
oDiv.innerHTML = "<p class=\"p\">我是修改后的段落</p>";
console.log(oDiv.innerHTML);
innerText属性
- 作用:获取或者设置调用者中的内容
- 如果是获取,会去掉调用者中的标签, 将其它的内容返回给我们, 并且会去除两端的空格
- 如果是设置,会利用设置的值覆盖调用调用者中所有的内容,如果设置的值中包含了HTML标签,不会解析和创建, 会原样添加
- 有兼容性的问题,不能很好的支持所有的浏览器
var oDiv = document.querySelector(".son1");
console.log(oDiv.innerText);//我是段落
oDiv.innerText = "<a>我是a标签</a>";
console.log(oDiv.innerText);//<a>我是a标签</a>
textContent属性
- 作用:获取或者设置调用者中的内容
- 如果是获取,会去掉调用者中的标签, 将其它的内容返回给我们, 但是不会去除两端的空格
- 如果是设置,会利用设置的值覆盖调用调用者中所有的内容,如果设置的值中包含了HTML标签,不会解析和创建, 会原样添加
- 有兼容性的问题,不能很好的支持所有的浏览器
var oDiv = document.querySelector(".son1");
console.log(oDiv.textContent);// 我是段落1
oDiv.textContent = "<a>我是a标签</a>";
console.log(oDiv.textContent);//<a>我是a标签</a>
var oDiv = document.querySelector(".son1");
//兼容处理
function setInnerText(obj,ctx) {
if("textContent" in obj){
obj.textContent = ctx;
}else {
obj.innerHTML = ctx;
}
}
setInnerText(oDiv, "<a>我是a标签</a>");
注意点:
- innerHTML,innerText,textContent用于获取或者设置==双标签==中的内容
- 如果想获取或者设置input中的内容, 需要使用value属性
<input type="hello" value="这是value">
var oInput = document.querySelector("input");
console.log(oInput.innerHTML);//空
console.log(oInput.innerText);//空
console.log(oInput.textContent);//空
console.log(oInput.value);//这是value
console.log(oInput.getAttribute("value"));//这是value
设置节点的样式
- 通过style属性来设置
- 如果是设置宽度和高度,需要添加单位, 否则会报错
- CSS中用-连接的属性名称, 都会去掉-,将后面一个单词的首字母大写
var oDiv = document.querySelector(".father1");
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.backgroundColor = "red";
console.log(oDiv.style.width); //返回一个字符串
- 通过className属性来设置
- 默认情况下通过元素对象操作元素的属性时,都是自带的是什么名称, 操作的时候就是什么名称
- class是js的一个关键字,所以这里就将HTML标签的class属性的名称改为了className
var oImg = document.querySelector("img");
console.log(oImg.alt);
oImg.className = "box";//不能写.box
- 如果是操作个别的样式,那么推荐使用style属性
- 如果是操作多个的样式,那么推荐使用className属性
