9-1 钟诚dom 及练习

学员日志 697 4年前 0 学员日志

9-1

元素名.remove() 删除节点

新节点=要复制的节点.cloneNode(参数) 参数可选复制节点

var btn = box.cloneNode(false) 浅拷贝只拷贝了标签

var btn = box.cloneNode(false) 深拷贝标签里的一起拷贝 //box 要拷贝的标签id class名

document.body.apendChild(btn) 插入在页面中

节点的属性

为节点添加属性例：img.setAttribute("src",图片路径") 为img标签添加属性

删除节点属性：：img.removeAttribute("属性名称")

改变标签中样式

var btn1=document.getElementsByTagName('button')[0] //名称获取

var w =document.querySelector('#tp')

btn1.onclick =function (){

w.style.cssText="background:url(2.jpg)" //改变div背景图片

}

//单节点

window.onload = function(){

var box = document.getElementById('box')

// console.log(box.firstElementChild) //拿到的button按钮 firstElementChid 获取第一个子节点

//获取最后一个节点

// console.log(box.lastElementChild)

//获取所有节点

console.log(box.childNodes) //获取box里所有子节点 nodeType == 1 是元素节点 nodeType == 2 是元素节点是属性节点 nodeType == 3 是文本节点

//child

}

//定义表单含有input 和按钮完成当点击按钮的时候输出输入框中的值，如果输入框为空，alert输入不能为空，否则正常alert输出value值；

// var input = document.getElementById("d")

// var btn = document.querySelector("button")

// btn.onclick = function () {

// var input1 = input.value;

// console.log(input1)

// if (input1 =="") {

// alert('输入值不能为空')

// } else {

// alert('输入正确')

// }