原生js操作dom

操作元素节点:

 1).创建元素节点:
    document.createElement("ul");   创建一个ul元素节点
2).插入元素节点
    appendChild();  body.appendChild(ul);
    insertBefore();   在DOM树上某个节点前面操作
3).删除元素节点
    div.remove("ul");
4).复制元素节点
    cloneNode();  深复制  和  浅复制
        深复制(深copy):完全复制一个完整的元素节点
        浅复制(浅copy):仅仅复制当前元素,不包含里面的任何东西
5).替换(修改)元素节点
    replaceChild();

操作属性节点:

1)方式一:
    打点   div.title 
    例如:  div.title = "xx"
2)方式二:
    getAttribute()(获取元素节点)
    setAttribute()(设置元素节点)
    两种方式的不同:打点操作只能用于标签已定义好的属性,而方式二可以用于标签已定义好的属性和程序员自己写的属性。

操作文本节点:

获取文本节点:div.innerHTML;
设置文本节点:div.innerHTML = "hello jq";

学习DOM就学习四块内容:

1. 操作节点   你需要掌握10个API。
    操作元素节点
    操作属性节点
    操作文本节点
2. 操作CSS
    1)操作CSS类    className
        div.className = "xx"  // 设置一个新类
        div.className = ""  // 把div上的css类清空
        div.className  // 获取div上都有哪些类

        let div = { name:"wc" }
        div.name = "xq";  // 设置一个新值
        div.name = "";   // 设置(把属性值赋成空)
        div.name;   获取属性
    2)操作CSS行内样式:
       
操作行内样式,就是操作style属性节点 div.style.display = "block" 3. 事件 在DOM中,事件绑定有三种形式: 1)html级别的事件绑定 把事件当成了标签的属性 2)dom0级别的事件绑定 eye.onclick = function(){} 就是给onclick属性赋值 后面再赋值就覆盖 问DOM0级别事件绑定的原理:给属性赋值 3)dom2级别的事件绑定 推荐使用它 eye.addEventListener("click",function () {}) 基于事件池机制,可以给事件源绑定多个相同的事件 ** 事件对象 ** 本质是一个对象。eg:.box.onclick=function(e){} 上面的监听器当事件发生时,浏览器会帮我们调用这个函数,在调用时会进行参数的传递,浏览器会把一个对象传递到这个函数中,e是形参,e就接收了这个对象,这个对象就叫事件对象。 事件对象中浏览器调用监听器传递的实参,e仅仅是形参,也就是说形参命名随便写,通常我们会写e,event,ev... **事件冒泡** 有时候,我们不想事件冒泡: 可以利用事件对象中的一个api,阻止事件冒泡。 son.onclick = function (e) { e.cancelBubble = true console.log("son...") } box.onclick = function (e) { console.log("box...") } 4. 定时器 1)一次性定时器: window.setTimeout(()=>{},1000); 关闭:clearTimerout(); 2)循环定时器 window.setInterval(()=>{},1000); 关闭:clearInterval() 每隔1s执行里面的回调函数循环定时器要产生很多EC,如果不用了,一定要关系定时器。

js操作盒子模型

1)client系列:
1. clientWidth: 获取box的内容区域width+左右padding (可视区域width的大小)
2. clientHeight:获取box的内容区域height+上下padding (可视区域height的大小)
3. clientTop:获取盒子的上边框大小
4. clientLeft:获取盒子的左边框大小

问:我要获取当前页面一屏的宽度(可视区)
答:1)document.body.clientWidth   2)document.documentElement.clientWidth

问:我要获取当前页面一屏的高度(可视区)
答:1)document.body.clientHeight   2)document.documentElement.clientHeight

注意:
    1)clientWidth,clientHeight,clientTop,clientLeft只能获取值,不能设置值
    2)获取的值,是一个数字,并没有单位
    3)获取的值是一个整数,不是小数,即使是小数,获取时,也给转化成整数
    4)client系列不官你的内容是否溢出,得到盒子的可视区域

2)offset系列
1. offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
2. offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
3. offsetTop: 放一下 获取一个绝对定位元素相对于参考点上面的距离
4. offsetLeft: 放一下 获取一个绝对定位元素相对于参考点左面的距离
5. offsetParent(***): 放一下 获取一个绝对定位元素的参考点
3)scroll系列:
1. scrollWidth:
在没有内容溢出的情况下:scrollWidth = clientWidth
在内容溢出的情况下:scrollWidth的值约等于真实内容的宽度,不同浏览器中得到的值可能不一样
overflow属性会影响scrollWidth。
只能获取值,不能设置值
2. scrollHeight:
在没有内容溢出的情况下:scrollHeight = clientHeight
在内容溢出的情况下:scrollHeight的值约等于真实内容的高度,不同浏览器中得到的值可能不一样
overflow属性会影响scrollHeight。
只能获取值,不能设置值

    问:我要获取当前页面真实内容的高度。
       答:1)document.body.scrollHeight   2)document.documentElement.scrollHeight
3. scrollTop:
    获取垂直滚动条滚动的距离(获取垂直滚动条卷去的高度)
    特殊:不只可以获取,也可以设置(可读可写)  重要

    问:我要获取当前页面卷上去高度。
       答:1)document.body.scrollTop   2)document.documentElement.scrollTop

    问:一张网页卷上去最大高度是多少?
       答:scrollHeight - clientHeight
4. scrollLeft:
    特殊:不只可以获取,也可以设置(可读可写)
    获取水平滚动条滚动的距离(获取水平滚动条卷去的距离)

你可能感兴趣的:(操作元素节点,学习dom相关知识,事件,定时器,js,dom)