day10

检测浏览器内核

//浏览器内核（渲染引擎）决定页面加载（css和js代码的执行）的机制
//也就是所有存在兼容性的处理都必须要检测当前的内核
//利用navigator对象的useragent属性来判断
if(navigator.userAgent.includes("applewebkit")){
//apple内核
alert("apple内核")
}else if (navigator.useragent.includes("trident")){
//ie内核
alert("ie内核")
}else if(navigator.userAgent.includes("Gecko")){
alert("火狐内核")
}

dicument.write

网页加载过程中写入当前页面了
//document对象write方法，用来向页面中写入内容
//支持html标签
document.write(<h1>hello javascript</h1>)

//同时写入多个内容，传入多个参数

//alert（""）警告框，不解析html文档

document.write("<h1>,""hello wroid","</h1>")
//写入一行write line 不是br而是\n文本换行
document.write("a")
document.write("b")//在编辑器里换行在浏览器相当于一个空格

//点击执行时，网页已经加载完毕了，必须新开文档写入
function fn(){
//如果文档是关闭的，js会隐式的打开新文档
//你也可以手动的打开，覆盖原有的页面
document.open()
document.write("some text")
//关闭文档流，不手动关闭，可能浏览器会一直等待
document.close()
}

        <p>密码：
            <input type="password" name="userpwd" value="">
        </p>
        <p>
            <input type="submit" value="登陆">
        </p>

//w3c标准化之前的dom模型，称为遗留dom，也叫0级dom
//0级daom中，主要通过标签来取得元素例如 document.forms 获取所有表单

console.log(documemt.gorms)//返回HTMLCollection集合，哪怕就一个也是集合
//通过标号取某一个
console.log(document.forms[0])
//如果表单经过命名还可以通过名字取得
console.log(document.forms.login)
//鉴于表单的使用非常广泛，还可以有更零活的方式来获取
//事实上 js 在document 上直接引用了命名的表单
//document.login=document.forms.login
console.log(document.login)//意味着可以省去forms
//同理表单里面的控件也可以通过表单直接获取
console.log(document.login.uname)//节点对象
console.lof(document.login.userpwd)//节点对象

//节点对象的操作
var input =document.login.uname
var uname =input.value
console.log(uname)

伪数组对象

//dom查询返回HTMLCollection对象有编号和length属性，它类似数组，但不是数组
var obj ={
//第一个特点有数字编号
0:"a"
1:"b"
//第二个特点：有length属性
length：2
}
//obj.idnexof()
//它很像，本质上确实也相同，但是结构（构造函数）不一样，方法不同，我们称为"伪数组"对象
//伪数组如果希望能够向真正意义上的数组使用，可以被转化
//var arr =Array.from（obj）

var arr =Array.from（obj）
console.Log(arr)
console.log（arr.lncludes（"a"））//true

//手动实现伪数组，转化成真数组
var arr=[]
for(var i=0,i<obj.length;i++){
arr.push(obj[i])
}

标准dom查询接口

//w3c标准化之后，提供了转梦的接口方法，用来查询页面中的元素
//通过id查找元素
var cont = document.getElemenById("container")
console.log(cont)

//通过类型查找,返回HTMLCollction伪数组对象
var lis = document.getRlementByclassName("item")
//通过下标取得
console.log(lis[0])
//使用ltem方法
console.log(lis.liem(0))
//通过标签名查找
var lis =document.getELementsByTagName("li")
console.log(lis)
//根据name值获取元素，一般针对表单控件
//返回 Nodelist，伪数组对象
var chkboxes = document.getelementsbyname("fav[]")
console.log(chxboxes)
//遍历每个选框，判断是否选中
var result =[]
for (var i =0,i<chxboxes.length;i++){
//如果有checked属性，则表示选中
if(chkboxes[i].checked){
result.push(chkboes[i].value)
}
}
console.log("选中项："，result.jojn(","))

创建节点

//js除了能够查询页面已有元素和节点外
//还可以手动创建节点，接下来插入到页面
//节点有8种类型，常见的有：
//1、元素节点，指代页面中的标签，element
//创建元素节点
var p =document.createelement("p")
console.log(p)
//2、文本节点，页面的文本内容，每个内容都有属于自己的标签
//创建内容节点
var cont = document.createtextnode("hello worid")
console.log(cont)
p.appendchild(cont)//将文本放入标签内
console.log(p)
//3、属性节点，标签的属性，也视作一个节点
//只要是节点，就可以按照接地那对象来操作
//创建属性节点

console.dir(...)//异步执行，查看的整个程序执行玩之后的对象结果，不是此刻对象的值

var attr = document.createAttibute("align")
attr.value="center"
p.setAttributeNode(attr)//给标签设置属性
console.log(attr)
//将创建好的内容，插入页面中
docunment.boby.appendchid(p)//在body最后插入

day10.查找节点