js(操作BOM&DOM)

什么是BOM

Browser Object Model(浏览器对象模型)提供了独立于内容与浏览器窗口进行交互的对象

window对象:

弹窗语法说明
警告框

window.alert()

用于确保用户可以得到某些信息

确认框

window.confirm()

用于验证是否接受用户操作

提示框

window.prompt()

用于提示用户在进入页面前输入某个值

alert()方法:

<button onclick="myFunction()">点我</button>

function myFunction(){
	alert("你好,我是一个警告框!")
}

confirm()方法:

var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了【确定】按钮!";
	}else{
		x="你按下了【取消】按钮!";
	}

prompt()方法:

var person=prompt("请输入你的名字","Harry Potter");

location 对象

语法说明

location.href

返回当前页面的 URL

location.pathname

返回 URL 的路径名

location.assign()

加载新的文档

location.href方法

 var  url =  window.location.href;   //  返回当前的地址
 console.log(url)

重新定向:

<button onclick="gotonewindex()">点击跳转</button>
 function  gotonewindex(){
     window.location.href = "http://www.baidu.com"  //  重定向
 }

location.pathname方法:

var   pathname =  window.location.pathname;
console.log(pathname)

location.assign() 方法

// 加载新的文档
function  getnewWord(){
    window.location.assign('index.css')
}

什么是DOM()

Document Object Model(文档对象模型),HTML文档对象模型(HTML DOM)定义的一套标准方法,用来访问和操纵HTML文档

查找HTML元素

语法说明

document.getElementById

通过id属性获取对象

document.getElementsByTagName

通过标签名获取对象

document.getElementsByClassName

通过class属性获取对象

通过id属性获取对象

var  app =  document.getElementById("app");
    app.onclick= function(){
        alert("我点击的当前的div")
    }

通过选择器来拿去dom元素  但是只能获取一个

var  idapp =  document.querySelector("#app");
var  ul = document.querySelector(".item");
var  li = document.querySelector("li");

通过选择器来拿去多个元素 

var  li =  document.querySelectorAll(".item");

HTML DOM - 改变 HTML

语法说明

document.write()

改变 HTML 输出流

对象.innerHTML=新的 HTML

改变 HTML 内容

对象.attribute=新属性值

改变 HTML 属性

innerHTML

:输出为文档流   可以将字符串标签识别;  如果后面追加了内容  会覆盖到原先的内容  如果没有追加内容 会获取当前标签的内容   连同标签一并输出

var  app  = document.getElementById("app");
         // app.innerHTML = "这是我用js追加进去的内容";
         app.innerHTML =  "<h1>这是我追加进去的标签<span style='color:red'>*</span></h1>"

innerText

输出为文字   不能识别字符串标签   会将标签字符串一并输出到页面, 如果后面追加内容  会只输出内容 

var  content =  document.getElementById("content");
content.innerText = "<h1>这是我设置进去的文字</h1>"

 

 

 

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页