BOM与DOM

目录

• bom
  • window对象的子对象中location(***)
  • window的子对象的navigator对象
  • 弹出框
  • 计时器相关内容
• MOD

 

---

回到顶部

1|0bom

1|1window对象的子对象中location(***)

	location.reload()  刷新当前页面
	location.href  获取当前网页
	location.href="网址"   跳转到该网址

1|2window的子对象的navigator对象

navigator对象   --->通过这个对象可以判定用户所使用的浏览器，包含浏览器相关信息
navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

1|3弹出框

警告框

alert("弹出信息")

弹出确认框

confirm("弹出信息")

提示框

prompt("请在下方输入","")

1|4计时器相关内容

开启计时器,距离多少时间执行js代码
var a =setTimeout("JS代码","延迟多少毫秒")   //js代码不写成字符串会直接执行
一般将js代码封装在函数
setTimeout(function(){confirm("ddd")},3000)

清除计时器
clearTimeout(a)

开启计时器,每隔多少时间执行代码
var a=setInterval("js代码",时间)
clearInterval(a)     //清除计时器

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

回到顶部

2|0MOD

选择器

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

间接查找

var a =document.getElementById("d")
a.parentElement;  查看a的父节点

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点(创建标签)

var divEle = document.createElement("div");

添加节点

追加一个子节点（作为最后的子节点）
	somenode.appendChild(newnode)；
	先创建一个标签,然后找到父标签,然后使用添加节点添加进去
把增加的节点放到某个节点的前边。
	somenode.insertBefore(newnode,某个儿子节点);

删除节点

父级标签中删除子标签
somenode.removeChild(要删除的节点)

替换节点

父级标签中替换子节点
somenode.replaceChild(newnode, 某个节点);

文本节点

somenode.innerText="替换的文本"    只能替换文本,不识别标签
somenode.innerHtml="替换的文本"     能替换文本,识别标签

属性操作

divEle.setAttribute("age","18")  #设置属性值
divEle.getAttribute("age")		获取属性值
divEle.removeAttribute("age")     删除属性值

默认属性
标签名的实例化对象.herf  查看herf值


选择框:
	<select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
	
	var inp = document.getElementById('city');
	inp.value;  #查看值
	inp.value = '1';  #设置值

值的操作

elementNode.value
适用于以下标签，用户输入或者选择类型的标签：
1.input   
2.select
3.textarea 

class操作

标签对象.classlist 查看类列表
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  判断是否存在某个class值,存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

css操作

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position


2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。获得光标               // 练习：输入框
onblur         元素失去焦点。失去光标               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

绑定事件方式1

<div id="d1" class="c1" onclick="f1();"></div>

<script>
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }

</script>

绑定事件方式2

	<div id="d1" class="c1"></div>

    var d = document.getElementById('d1');
    d.onclick = function () {
        d.style.backgroundColor = 'yellow';
    }

事件里面的this

方法1:

this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(this) {
        // var d = document.getElementById('d1');
        // d.style.backgroundColor = 'yellow';
        this.style.backgroundColor = 'yellow';

        var d = document.getElementById('d2');
        d.style.backgroundColor = 'yellow';
    }

方法2

    <div id="d1" class="c1"></div>
    
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示当前标签对象
    }

onblur和onfocus事件

 var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'pink';
    };
    // onblur 失去光标时触发的事件

    inp.onblur = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'green';
    };

onchange事件,域内容发生变化时触发

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齐</option>

</select>

// onchange事件，内容发生变化时触发的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
    	//this.options  select标签的所有的option标签
    	//this.selectedIndex被选中的标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
    
    
用户名:<input type="text" id="username">    

    //input标签绑定onchange事件
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value);  
    };    

__EOF__

作　　者：LuYi
出　　处：https://www.cnblogs.com/luyi84895838/p/11958874.html
关于博主：编程路上的小学生，热爱技术，喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！