dom

查找HTML属性

通过 id 找到 HTML 元素   -document.getElementById();

通过标签名找到 HTML 元素 -document.getElementsByTagName();

通过类名找到 HTML 元素 -document.getElementsByClassName();

通过name找到 HTML 元素 -document.getElementsByName();

document.querySelector();

querySelector() 返回 dom 对象 不是类数组
参数是 css 选择器

document.querySelectorAll();

querySelectorAll() 返回的由dom对象组成的类数组
参数css 选择器

插入文本信息

    //插入文本信息
    //第一步获取xxx标签
    
    var xxx = document.querySelectorAll('xxx')[0];
    //第二部 通过innerHTML给xxx添加文本内容
    xxx.innerHTML='插入文本信息'
    //nnerHTML 注意事项
    //1.dom.innerHTML 返回dom中所有自带的【字符串】重新赋值 改变HTML结构
    //2.在原有基础上新增 而是重新赋值 （辛辛苦苦好多年一夜回到解放前）
    var xxx= document.querySelectorAll('xxx')[0];
    console.log(xxx.innerHTML);
    xxx.innerHTML='';
    //innerText 赋值内容 类型为字符串
    // 重新赋值 不适合新增操作
    // xxx.innerText=''

    //innerHTML 与 innerTest
    //应用上差不多 初始化返回 innerHTML中 包括html 字符串 innerTest没有
    //建议使用innerHTML

获取某个元素 css 属性的赋值

function getStyle(dom,cssAttr){
if(typeof dom.currenStyle !== undefined){
    return dom.currenStyle[cssAttr]
}else{
    return getComputedStyle(dom,null)[cssAttr]
}

}

增加标签属性

function addClassName(dom,name){
//dom 是一个dom 元素 ???
//name 是一个字符串
if(typeof name !== 'string') return
var domClass=dom.className;
var domClassArr = domClass.split(' ');
//验证domClassArr 数组中是否存在 name
if(domClassArr.indexOf(name) !== -1) return
domClassArr.push(name);
domClass = domClassArr.join(' ');
dom.className = domClass
return
}

删除标签属性

function deletClassName(dom,str){
var classList = [...dom.classList];
var index = classList.findIndex(function(item){
    return str === item
})
if(index === -1)return
classList.splice(index,1)
dom.className =classList.join(' ')
return
}