JavaScript DOM

DOM开篇

1. 什么是DOM?

• 文档对象模型,是关于如何获取、修改、添加或删除 HTML 元素的标准

2. 什么是document文档对象?

• 是系统提供的一个对象,这个对象就是DOM对象,这个对象以树的形式保存了界面上所有的内容

3. 标签, 元素都是 HTML标签的称呼

获取界面上的元素

1. 自定义对象

function Person() {}
var per = new Person();

2. 内置对象

Array/String/Boolean/Number/...

3. 宿主对象

• 简单的可以理解为浏览器提供的对象
• DOM和BOM中的对象都是宿主对象

通过标签名称获取界面上的元素

1. 通过ID获取界面上的元素

• 会将id名称为指定名称的的元素返回给我们
• 注意点:如果id名称重复,返回的是第一个找到的元素(返回宿主对象)

    var oDiv = document.getElementById("father");
    console.log(oDiv);
    console.log(oDiv);

2. 通过类名获取界面上的元素

• 找到==所有==类名为指定名称的元素, 放到一个集合对象中返回给我们
• 这个集合对象是一个伪数组(对象)
• 注意点:有兼容性问题,IE9才支持

    var oDiv = document.getElementsByClassName("son");
    console.log(oDiv);
    console.dir(oDiv);

3. 通过标签名称获取界面上的元素

• 找到==所有==指定标签的元素, 放到一个集合对象中返回给我们

    var oDiv = document.getElementsByTagName("div");
    console.log(oDiv);

4. 通过name属性名称来获取界面上的元素

• 注意点:在不同浏览器执行结果可能不同
• 找到==所有==指定name的元素

    var oDiv = document.getElementsByName("pp");
    console.log(oDiv);

5. 根据选择器来获取界面上的元素

• 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

---

节点

获取元素

1. 获取子元素

    var oDiv = document.querySelector(".son1");
    console.log(oDiv);

2. 通过子元素获取父元素
   • 一般情况下在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);

3. 通过指定元素找到上/下一个元素

    var oDiv = document.querySelector(".son1");
    //上一个元素
    // var oPDiv = oDiv.previousElementSibling || oDiv.previousSibling;
    // console.log(oPDiv);
    //下一个元素
    var oNDiv = oDiv.nextElementSibling || oDiv.nextSibling;
    console.log(oNDiv);

4. 通过指定元素找到所有的子节点/子元素

    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);

节点之间的增删改查

1. 创建一个元素:createElement
2. 添加到界面上:
   • appendChild()添加到指定元素中的末尾
   • insertBefore(,)将第一个参数的元素插入到第二个参数元素的前面
3. 删除指定的元素: 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);

节点属性的操作

1. 获取取节点的属性
   1. 直接获取(通过DOM查询到对应的元素之后,返回给我们的是一个对象)
   2. 通过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(属性) 既可以获取自带的属性也可以获取自定义属性

2. 删除属性
   1. 直接删除(不能删除自定义属性)
   2. 通过removeAttribute方法来删除

var oImg = document.querySelector("img");
oImg.alt = "";
oImg.removeAttribute("yzf");

3. 设置属性的值
   1. 直接设置
   2. 通过setAttribute方法来设置
   3. 注意:有就修改,没有就新增

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

设置节点的样式

1. 通过style属性来设置
   • 如果是设置宽度和高度,需要添加单位, 否则会报错
   • CSS中用-连接的属性名称, 都会去掉-,将后面一个单词的首字母大写

var oDiv = document.querySelector(".father1");
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.backgroundColor = "red";
console.log(oDiv.style.width); //返回一个字符串

2. 通过className属性来设置
   • 默认情况下通过元素对象操作元素的属性时,都是自带的是什么名称, 操作的时候就是什么名称
   • class是js的一个关键字,所以这里就将HTML标签的class属性的名称改为了className

var oImg = document.querySelector("img");
console.log(oImg.alt);
oImg.className = "box";//不能写.box

3. 如果是操作个别的样式,那么推荐使用style属性
4. 如果是操作多个的样式,那么推荐使用className属性