Hexo
0%

javascript_DOM基本操作（二）

发表于 更新于 分类于 ，

javascript_DOM基本操作（二）：

操作元素的内容：

// 元素.innerText  会覆盖式的修改
// 元素.innerHTML  会连标签一起渲染

img

// 操作元素的内容
// 操作内容

// 文本内容
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
//获取元素的文本内容
console.log(ele.innerText)
btn.onclick = function () {
    ele.innerText = 'the fucking new text'
}
//输出一下文本
console.log(ele.innerHTML)
btn.onclick = function () {
    ele.innerHTML = '<span> the fucking new text </span>'
}

操作元素属性：

img

获取元素属性、修改属性（原生属性）：

// 操作元素属性
// 操作属性
// div 标签

//获取元素
var box = document.querySelector('div')
var inp = document.querySelector('input')
var btn = document.querySelector('button')

//获取元素属性
console.log(box.id)
console.log(inp.type)

//给按钮绑定点击事件
btn.onclick = function () {
    //修改属性值
    box.id = 'content'
    inp.type = 'checkbox'
}

获取元素属性、修改属性（自定义属性）：

// 操作元素属性

// 操作属性
// div 标签
    
//获取元素属性
var box = document.querySelector('div')
var btn = document.querySelector('button')
//获取自定义属性
var res = box.getAttribute('hello')
console.log(res)

// 给按钮绑定点击事件
btn.onclick = function () {
    //修改自定义属性
    box.setAttribute('hello', '新来的')
}

// 给按钮 绑定点击事件
btn.onclick = function () {
    //修改自定义属性
    box.removeAttribute('hello')
}

操作元素类名：

img

// 操作元素类名

// 操作类名
// div 标签

//获取袁术
var box = document.querySelector('div')
var btn = document.querySelector('button')
//获取类名
console.log( box.className)

//给按钮绑定点击事件
btn.onclick = function () {
    box.className = '这是一个新元素'
}

操作元素行内样式：

img

// 操作元素的行内样式

// 操作行内样式
// 返回行内样式
// 文本内容

//获取元素
var box = document.querySelector('div')
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
//输出行内样式
console.log(box.style.width)
console.log(box.style.height)
console.log(box.style.backgroundColor)    //有下划线的时候  需要使用驼峰命名法
btn1.onclick = function () {
    box.style.width = '200px';
    box.style.height = '400px';
    box.style.backgroundColor = 'red'
}
btn2.onclick = function () {
    box.style.width = '100px';
    box.style.height = '100px';
    box.style.backgroundColor = 'pink'
}

获取元素非行内样式：

前端是没有办法操作非行内样式的，只能获取

img

// 操作元素的行内样式

div {
    font-size: 20px;
}
    

// 操作行内样式
// 文本内容

var box = document.querySelector('div')
var btn = document.querySelector('button')
console.log(window.getComputedStyle(box).width)
console.log(window.getComputedStyle(box).height)
console.log(window.getComputedStyle(box).backgroundColor)
console.log(window.getComputedStyle(box).fontSize)

总结：

img

img

img