dom的一些笔记-白红宇

dom的一些笔记

阅读量：6152 次

发布时间：2019-06-21

本文共 6345 字，大约阅读时间需要 21 分钟。

Dom复习

1.获取标签名，常用的有3种方式：

<div id="box" οnclick="fn()"></div>

var div = document.getElementById("box");

var arr1 = document.getElementsByTagName("div")

var arr2 = document.getElementsByClassName("leiming");

2.onclick事件

div.onclick = function () {

        //        alert(1);
        //可以操作标签的属性和样式。
         div.className = "aaa";

        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "red";
    }

（2.用函数名绑定）

不能写写括号，否则成为了返回值

div.onclick = fn;

function fn() {

//3.书写事件驱动程序。
alert(1);

}

3.windows.onload事件

//什么条件下触动这个事件呢？页面加载（文本和图片）完毕的时候。

//用途
//js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）
//整个页面上所有元素加载完毕在执行js内容
//window.onload可以预防使用标签在定义标签之前。

案例：

window.onload = function () {

var aaa = document.getElementById("box");

console.log(aaa);

aaa.style.width = "100px";

}

<div id="box"></div>

4.一个案例

关闭京东的广告栏：dom1-05

5.document 文本流

//节点的访问看看

<div class="box1">

<div class="box2" id="box2"></div>

<div class="box3"></div>

</div>

//1.box1是box的父节点

var box2 = document.getElementsByClassName("box2")[0];

var box2 = document.getElementById("box2")

console.log(box2.parentNode);

//2.nextElementSibling下一个兄弟节点
console.log(box2.nextElementSibling);

//3firstElementChild第一个子节点
console.log(box2.parentNode.firstElementChild);

//4所有子节点
console.log(box2.parentNode.childNodes);

console.log(box2.parentNode.children);

//节点的增、删、查、改

1.创建节点

var aa=document.craeteElement

var aaa = document.createElement("li");

2.添加 appendChild(标签节点);
var box1 = document.getElementsByClassName("box1")[0];

box1.appendChild(aaa);

box1.insertBefore(bbb,aaa);//把节点bbb放在aaa之前

3.删除 removeChild(标签节点);
box1.removeChild(bbb);

aaa.parentNode.removeChild(aaa);//自杀，自己删除自己

4.克隆
var ccc = box1.cloneNode();//默认为false
var ddd = box1.cloneNode(true);

console.log(ccc);

console.log(ddd);

6.节点属性的获取与赋值

//属性、赋值获取两种方式

//1.元素节点.属性或者元素节点[属性]

<img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>

Var eleNode=document.getelementbyid(aaa);

eleNode.src = "image/jd2.png";

eleNode.aaa = "bbb";

console.log(eleNode.aaa);

console.log(eleNode.src);

console.log(eleNode.tagName);

console.log(eleNode["title"]);

console.log(eleNode["className"]);

console.log(eleNode["alt"]);

//2.元素节点.方法(); getAttributte set... Remove...3个方法

console.log(eleNode.getAttribute("id"));

eleNode.setAttribute("id","你好");

eleNode.setAttribute("ccc","ddd");

eleNode.removeAttribute("id");

7.案例（经典案例好好看看）

8.value innerHTML innerText的区别

<input id="inp1" type="text" value="我是inpput的value属性值"/>

<div id="box1">

我是box1的内容

<div id="box2">我是box2的内容</div>

</div>

<div id="box3">

我是box1的内容

<div id="box4">我是box2的内容</div>

</div>

<script>

//value：标签的value属性。
console.log(document.getElementById("inp1").value);

//innerHTML：获取双闭合标签里面的内容。（识别标签）
console.log(document.getElementById("box1").innerHTML);

document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

//innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
console.log(document.getElementById("box3").innerText);

document.getElementById("box3").innerText = "<h1>我是innerText</h1>";

</script>

Dom2（记得查事件）

1,隐藏二维码：核心代码

2.文本框禁用

btn1.οnclick=function(){

//3.书写事件驱动程序
input.disabled="no";//填写任何的值都表示true表示禁用

}

btn2.οnclick=function() {

input.disabled=false;

}

3.onfocus获取了焦点 onblur失去焦点（焦点就是光标是否在）

文本框获取焦点

4.重要的访问关系：

//兄弟节点（前一个和后一个：previousSibling和nextSibling）

//previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。

兼容性写法：

1.前后兄弟节点

var pre = box3.previousElementSibling || box3.previousSibling;

var net = box3.nextElementSibling || box3.nextSibling;

pre.style.backgroundColor = "red";

net.style.backgroundColor = "yellow";

2.第一个子节点，最后一个子节点

var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;

var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;

3.所有子元素的获取方法：(2种方式)

var arr = box3.parentNode.children;

Var arr=box3.parentNode.childNodes;

4.怎么指定一个节点呢？

var index = 0;

var node = box3.parentNode.children[index];

Html结构如下：

<ul>

</ul>

5.nodeType nodeName nodeValue

<div id="box" value="111">你好</div>

<script>

    var ele = document.getElementById("box");//元素节点
    var att = ele.getAttributeNode("id");//属性节点
    var txt = ele.firstChild;

console.log(ele);

console.log(att);

     console.log(txt);
    //属性1 nodeType
    console.log(ele.nodeType);//1
    console.log(att.nodeType);//2
    console.log(txt.nodeType);//3

    //属性2 nodeName
    console.log(ele.nodeName);//DIV
    console.log(att.nodeName);//id
    console.log(txt.nodeName);//#text

    //属性3 nodeValue
    console.log(ele.nodeValue);//null
    console.log(att.nodeValue);//box
    console.log(txt.nodeValue);//你好

nodeType:1,document.get

连续赋值样式：

DOM3

1.获取元素的函数封装

//1.功能：给定元素查找他的第一个子节点，并返回

function getFirstNode(ele){

var node=ele.firstElementChild||ele.firstChild;

return node;

}

//2.功能：给定元素查找他的最后一个子节点，并返回
function getLastNode(ele){

var node=ele.lastElementChild||ele.lastChild;

return node;

}

//3.给定元素查找他的下一个元素兄弟的节点，并返回
function getNextNode(ele){

return ele.nextElementSibling||ele.nextSibling;

}

//4.给定元素查找他的上一个元素兄返弟的节点，并返回
function getPrevNode(ele){

return ele.previousElementSibling||ele.previousSibling;

}

/**
* 5.给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){

return ele.parentNode.children[index];

}