Web全栈20201128-js的dom操作1

在后边做程序必须使用dom元素操作，dom的全名称document object model(文本对象模型)，整个页面浏览器上所有元素统称为dom
dom树： window html（元素标签） location history
怎么使用dom：操作dom:
2-1.dom元素获取
2-2.dom元素属性操作（常规属性操作）
2-3.dom元素节点操作（子父节点之类的）
2-4.dom元素的事件（行为）
2-5.dom元素的方法操作
dom元素的八个方案：
== js里面dom元素操作不支持隐式迭代（js操作dom不能直接操作一堆，只能单个操作）==
3-1.两个固定获取(静态获取)
3-1-1类似css元素选择器获取：querySelector 获取之后返回的对象为单个对象；querySelectorAll 返回的是多个对象集合类型NodeList。返回的是一个集合这个集合至少有一个子集。
== queryselect为什么只获取第一个，因为第一个已经拿到了就不拿第二个了==
3-1-2静态获取指的是获取页面现有的元素，通过代码添加元素获取不到
3-2.四个动态获取
3-2-1 //id 获取返回是单个对象id要先有才能获取
var btnid=document.getElementById(“btninfo”);
console.log(btnid);
id获取特殊用法
id dom获取特殊用法：
//不用获取可以直接使用
console.log(btninfo); //id是唯一的可以直接使用做为当前dom
3-2-2 //class获取返回的是 HTMLCollection 集合类型按照单个对象的用法来用 key:value
var btnclass=document.getElementsByClassName(“btn”);
console.log(btnclass[0]);
console.log(btnclass[1]);
3-2-3 //通过元素标签名称获取的返回HTMLCollection 集合使用同class
var btnTagName=document.getElementsByTagName(“button”);
console.log(btnTagName[0]);
console.log(btnTagName[1]);
3-2-4//通过Name属性获取返回NodeList 集合用法同上
var btnName=document.getElementsByName(“but”);
console.log(btnName[0]);
console.log(btnName[1]);
3-3. 两个特殊获取
3-3-1//body
var body=document.body;
console.log(body);
3-3-2//html
var html=document.documentElement;
console.log(html);
dom元素属性操作（常规属性操作是属性获取或者设置）
操作dom属性和方法
4-1操作类名称

console.log(btnlist.className);
    console.log(btnlist.name);
    console.log(btnlist.id);
    console.log(btnlist.style);
    console.log(btnlist.style.width);
    console.log(btnlist.style.height);

4-2设置属性和设置类

btnlist.className="btn pink";
btnlist.classList.add("data");//类添加
    console.log(btnlist.classList.contains("pink"));//检测元素是否具有某个类  true false
    console.log(btnlist.classList.length);//输出元素类几个
    btnlist.classList.remove("data");//移除类
    //toggle  参数2  boolean  true  添加   false  移除   可以不写
    btnlist.classList.toggle("pink",false);//类别的切换

4-3style的设置原生js可以单独设置元素的行内样式

  btnlist.style.width="200px";
    btnlist.style.backgroundPosition="0px 0px";
    btnlist.style.border="1px solid red";
    btnlist.style="width:120px;height:30px; color:blue;";

4-4元素的自定义属性的设置和获取
4-4-1设置自定义属性：btnlist.setAttribute("cls-tag","自定义");
4-4-2获取自定义属性：console.log(btnlist.getAttribute("cls-tag"));
4-5获取当前元素的非行内样式方法：console.log(window.getComputedStyle(btnlist).backgroundColor);
（下面这个是报错的，只能获取非行内样式，不能设置，因为 read-only 只读的
//window.getComputedStyle(btnlist).width=“200px”;）

dom元素子父节点操作
5-1获取当前元素的同胞兄弟元素
nextElementSibling 下一个元素
previousElementSibling 前一个元素
nextSibling 获取的是下一个节点（节点包含符号文本元素）
previousSibling 获取的是上一个节点（节点包含符号文本元素）

    var btn=document.querySelector("#btn");
     console.log(btn.nextElementSibling);
    console.log(btn.nextSibling);
    console.log(btn.previousElementSibling);
    console.log(btn.previousSibling);

5-2获取元素的子元素或者子节点
childElementCount 获取子元素的个数
children 获取的是子元素的集合
childNodes 获取的是子节点集合

   console.log(menu.childElementCount);
    console.log(menu.children);

5-3 获取元素的父元素或者父节点

console.log(liinfo.parentElement);
 console.log(liinfo.parentNode);

5-4对子元素进行遍历

for (var i = 0; i < menu.children.length; i++) {
    
    
        console.log(menu.children[i]);
    }
 console.log(menu.childNodes);

5-5对子节点进行遍历：子节点包含文本符号，元素
节点属性
nodeName 节点名称
nodeType 节点类型由数字表示： 1 元素 3 符号等
nodeValue 节点值

for (var i = 0; i < menu.childNodes.length; i++) {
    
    
 console.log(menu.childNodes[i]);
 console.log(menu.childNodes[i].nodeType);
  console.log(menu.childNodes[i].nodeValue);
  if (menu.childNodes[i].nodeName.toLowerCase() == "li") {
    
    
        console.log(menu.childNodes[i].childNodes[0].nodeValue);
    }
}

5-6获取子节点最后一个和第一个
firstChild 获取元素里面的第一个子节点
firstElementChild 获取第一个子元素
lastChild 获取元素的最后一个子节点
lastElementChild 获取最后一个元素

console.log(menu.firstChild);
console.log(menu.firstElementChild);
console.log(menu.lastChild);
console.log(menu.lastElementChild);

5-7动态创建dom元素
5-7-1追加到页面元素

var ipt = document.createElement("input");
    ipt.type = "button";
    ipt.value = "按钮";
    console.log(ipt);

5-7-2子元素追加方法：appendChild （追加到当前元素的内容之后）：document.body.appendChild(ipt);
5-8追加：
5-8-1insertBefore 将插入的节点添加已有的节点之前
5-8-2insertAfter由原生js不存在，实现insertAfter的功能插入到一个节点之后

document.body.insertBefore(ipt, userName);
    Node.prototype.insertAfter = function (newchild, refchild) {
    
    
        console.log(this);
        this.insertBefore(newchild, refchild.nextElementSibling);
    }
 document.body.insertAfter(ipt, userName);

5-9克隆节点：cloneNode 赋值节点参数true 克隆子节点：document.body.appendChild(ipt.cloneNode());
5-9dom元素节点移除：document.getElementsByTagName("h1")[0].remove();

扫描二维码关注公众号，回复： 13119537 查看本文章

dom元素事件处理机制（dom元素事件流）
原生js事件全部带on
dom元素事件：
window事件：onload onresize onreload onerror oncontentmenu onscroll
鼠标事件： onmouseenter onmouseleave(水平离开) onmouseout(垂直+水平离开) onmouseup
onmousdown onclick ondbclick onmousewheel onmouseover onmousemove
键盘事件：onkeydown onkeyup onkeypress
表单事件：onfocus onblur onsubmit onreset
jsdom元素如何添加事件
7-1.直接在元素行内直接操作事件绑定， this指针指向当前事件的执行对象
7-7-1

 function fun1() {
    
    
        //直接在元素上添加事件
        //函数不传递this  函数内部的this  指window
        //如果传递this  函数内部的参数  指当前的对象
        console.log("你点我", this);
    }
    function fun2() {
    
    
        console.log("你悬停我");
    }
    but.click();

7-1-2获取元素的属性

console.log(but.attributes);
 but.attributes.removeNamedItem("onmouseover");
 console.log(but.attributes.getNamedItem("onmouseover"));

7-1-3 设置属性

  var args=document.createAttribute("onmousemove");
     args.nodeValue="fun2()";
     but.attributes.setNamedItem(args);
but.setAttribute("onmousemove",'fun2()');

7- 2.获取dom元素动态绑定事件：this指针指向当前事件的执行对象

btn.onclick = function () {
    
    
        console.log("你点我", this);
        this.onclick = null;
    }
    btn.click();

自动触发涉及事件的闭包需要手动释放内存

var btnlist = document.getElementsByClassName("btn");
 for (var i = 0; i < btnlist.length; i++) {
    
    
        /*  btnlist[i].onclick = function () {
         console.log("事件", this);
         }*/
        btnlist[i].onclick = method;
        function method() {
    
    
            console.log("事件", this);
        }
    }
    //手动释放  内存
    btnlist = null;

7-3.事件监听
7-3-1使用事件监听添加
addEventListener 参数1：事件类型（不带on）参数2 事件执行的回调函数参数3：boolean类型值捕获 true 还是冒泡 false
addEventListener 是给同一个对象相同的事件添加1个或多个执行行函数
addEventListener 里面匿名函数种的this指向的是当前的执行对象

 btndata.addEventListener("click",function (){
    
    
     console.log("事件执行函数");
     });
     btndata.addEventListener("click",function (){
    
    
     console.log("事件执行函数");
     console.log(this)
     }

7-3-2事件监听移除需要函数的名称

function m2() {
    
    
    console.log("事件执行函数");
    //事件监听移除事件执行函数");
    console.log(this);
    //removeEventListener
    this.removeEventListener("click", m2);
}

字符串大小写转化：
8-1 .toLowerCase() 转化为小写字符串；toLocaleLowerCase() 转化为当地表示方法的小写字符串；toUpperCase() 转化为大写字符串；toLocaleUpperCase()转化为当地大写字符串；
8-2转化为字符串（钱的表示方法）

 var a = 1000000000000;
console.log(a.toLocaleString());//类似同String

事件冒泡机制（由里向外执行该事件）
单机事件冒泡机制，子父元素具有click 执行的时候会冒泡执行
处理事件冒泡
return false; 原生js里面不能阻止事件冒泡
需要通过事件执行参数 event 来解决
e.stopPropagation(); 处理事件冒泡
e.cancelBubble=true; 处理事件冒泡
事件的捕获冒泡

 block.addEventListener("click", function () {
    
    
        console.log("div的事件");
    }, true);
    block_btn.addEventListener("click", function () {
    
    
        console.log("button的事件");
    }, false);

事件的委托：自身事件委托给其他元素来执行

var nav = document.querySelector(".nav");
    nav.onclick = function (e) {
    
    
        //将事件委托给子元素来执行
        if (e.target.nodeName.toLowerCase() == "li") {
    
    
            console.log("事件执行");
        }
    }

总结：1. 在进行dom元素获取的时候要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在）（根据页面的加载顺序来考虑）
2.原生js操作样式，只能操作元素的行内样式
3.切换的意思是有的就删除，没有的话就加上
4.非行内样式只能获取，不能设置
5. 元素不包含文本回车，节点包含，nextelementsibling
6. 打console.log时直接打括号里面的内容，然后再.log
7.元素没有节点值，输出为null就是空格
8. 怎么同时打三行一样的内容

Web全栈20201128-js的dom操作1

猜你喜欢