学习Js-day09

2022-08-04 20:00:54 作者：互联网

DOM

DOM的概念：

DOM即文档对象模型（document object model）
DOM就是把html里的各种数据当做对象处理的一种思路。
DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

document文档对象：

方法：

// document文档对象
    // 1.获取全局的的内容
    // document.getElementById()//通过id属性来获取元素 返回的是一个元素
    // document.getElementsByClassName()//通过class属性名来获取元素 返回的是一个伪数组（HTMlElementCollection）
    // document.getElementsByTagName()//通过标签名获取元素 返回的是一个伪数组（HTMlElementCollection）
    // document.getElementsByName()//通过name属性来获取元素 返回的是一个伪数组（HTMlElementCollection）
    // document.querySelectorAll()//通过对应的选择器进行获取 返回的是一个伪数组（NodeList
    // document.querySelector()//通过选择器获取元素 ，返回的是第一个查找到的元素（Element
    var box = document.getElementById('box')
    console.log(box);
    var content = document.getElementsByClassName('content')
    console.log(content);
    console.log(content[0]);//访问第一个获取的元素
    var div = document.getElementsByTagName('div')
    console.log(div);
    var jack = document.getElementsByName('jack')
    console.log(jack);
    console.log(jack[0]);
    var divs = document.querySelectorAll('div')
    console.log(divs);
    var first = document.querySelector('div')
    console.log(first);
    console.log(document.getRootNode());//获取根节点

2.创建全局的内容

// 2.创建全局的内容
    // 创建元素document.createElement()返回的是一个元素
    // 创建属性节点 document.CreateAttribute()返回的是一个属性对象
    // 创建文本节点 document.createTextNode()返回的的是一个文本节点对象
    // document.head//获取head标签
    console.log(document.head);
    // document.body//获取body标签
    console.log(document.body);
    // document.forms//获取表单标签 返回的是一个伪数组（HTMlElementCollection
    console.log(document.forms);
    console.log(document.rootElement);//根元素（svg应用比较多）
    //创建的方法
    var p = document.createElement('p')//传入的是一个对应的标签名
    console.log(p);
    // 创建属性的方法
    var attr = document.createAttribute('password')//创建的是一个属性 默认为空值
    // 给属性对象赋属性值
    attr.value = '123456'
    console.log(attr);
    // 创建文本
    var text = document.createTextNode('创建内容') //创建一个文本节点对象
    console.log(text);
    // 后面带NS表示的是命名空间 内声明或获取

Element元素对象：

方法

// 相关属性
    var div = document.getElementsByTagName('div')[0]
    console.log(div.parentElement);//获取父元素
    console.log(div.childElementCount);//子元素个数
    console.log(div.children);//获取子元素（伪数组）
    // 获取兄弟元素
    console.log(div.previousSibling);//前一个
    console.log(div.nextElementSibling);//后一个
    // 相关的方法
    div.replaceChildren('hello')//替换所有的子节点 用传入节点替换里面所有的子节点
    var content = document.createElement('div')
    div.replaceChildren(content)
    // replaceChild 用前面的替代后面的（一定是属于我们本身的儿子元素
    var a = document.createElement('a')
    div.replaceChild(a,div.children[0])//使用新的节点来替换对应的子节点
    // 插入元素 append insert
    div.append('hello',content)//追加内容到后面
    // appendChild追加子元素
    var b = document.createElement('b')
    div.appendChild(content)  //追加一个元素在当前元素的里面  同一个元素只能加一次 存在之后就不能做添加
    div.appendChild(a)  //将自身删除 改变位置 追加一个元素在当前元素的里面
    div.appendChild(b)
    // insertBefore
    var span = document.createElement('span')
    // 参数1 当前需要插入的元素 参数2 对应的子元素 
    div.insertBefore(span,div.children[0])//插入到哪个子元素的前面 至少两个参数
    //删除元素 
    // div.remove()//全删 包括自己
    // 清空所有的内容 使用空元素替换所有元素

节点操作：

元素节点，属性节点，文本节点

<div></div>: 元素节点(最重要)

title="属性节点": 属性节点

测试Div : 文本节点

<script>
    // 节点分类
    // 元素节点element
    // 属性节点attribute （返回的是一个伪数组
    // 文本节点text
    // 节点相关属性
    // parentElement父元素
    // childNode父节点
    // childNodes子节点
    // children子元素节点
    // previousElementSibling上一个兄弟元素节点
    // previousSibling上一个兄弟节点
    // nextElementSibling下一个兄弟元素节点
    // nextSibling下一个兄弟节点
    // 节点分类的区分属性
    // nodeType节点类型 （1表示元素节点 2表示属性节点 3表示文本节点
    // nodeValue节点值   （元素节点的节点值获取不到null 属性节点的节点值 属性值 文本节点 文本 内容
    // nodeName节点名(元素节点的节点就是标签名 属性节点的节点就是属性值 文本节点的节点就是#text)
    // 相关的方法
    // cloneNode方法 克隆所有节点
    // append添加节点
    // appendChild添加节点
    // 
</script>

<script>
    var tagA = document.createElement('a')
    tagA.innerHTML = 'hello'
    var attr = document.createAttribute('name')
    name.value = 'zhangsan'
    var text = document.createTextNode('nihao')
    // nodeName 节点名 元素的节点名是大写的 属性节点的节点名是小写的 文本节点都是#text
    console.log(tagA.nodeName,attr.nodeName,text.nodeName);
    console.log(tagA.nodeType,attr.nodeType,text.nodeType);
    console.log(tagA.nodeValue,attr.nodeValue,text.nodeValue);
    // 获取a标签
    var ele = document.querySelector('a')
    ele.append(text)
    console.log(ele.parentNode);//获取父节点 
    console.log(text.parentNode);//获取父节点
    console.log(ele.childNodes);//获取所有的子节点 （空格以及回车都算是文本节点 ）不会包含属性节点（元素和脚本
    console.log(ele.childNodes);//获取所有的子节点
    // 获取所有的属性节点
    console.log(ele.attributes);//nameNodeMap伪数组（key：value）具备迭代器
    console.log(ele.attributes.length);
    // 访问
    console.log(ele.attributes[0]);//属性节点对象
    console.log(ele.attributes['href']);//得到对象
    console.log(ele.attributes['href'].nodeValue);//得到值 字符串
    console.log(ele.attributes['href'].value);//得到值 字符串
    for(var key in ele.attributes){
        console.log(ele.attributes[key]);
    }
    // getNameTtem setNameItem removeNameItem
    // 获取其中一个属性对象
    console.log(ele.attributes.getNamedItem('hello'));
    // 设置
    var attr1 = document.createAttribute('acc')
    attr1.value = 'abc'
    ele.attributes.setNamedItem(attr1)
    // remove属性
    ele.attributes.removeNamedItem('hello')
    //item 获取属性对象
    console.log(ele.attributes.item(0));
    // 上一个节点和下一个节点的获取
    console.log(ele.previousSibling);
    console.log(ele.nextSibling);
    // 属性节点的上一个节点和下一个节点都null
    console.log(ele.attributes.item(1).previousSibling);
    console.log(ele.attributes.item(0).nextSibling);

    // 属性节点操作的相关方法
    // 设置setAttributeNode 获取getAttributeNode 删除removeAttributeNode
    console.log(ele.getAttributeNode('abc'));//返回属性节点对象
    var attr2 = document.createAttribute('acc')
    attr2.value = '123456'
    console.log(ele.setAttributeNode(attr2));//同样的属性会被覆盖
    // var attr3 = document.createAttribute('acc')//属性节点
    // attr3.value = '123456'//由于attr3和attr2不是一个对象所以地址不一样
    // var attr3 = attr2//
    ele.removeAttributeNode(attr3);//删除对应得属性节点
    
</script>

this 调用者是谁就指向谁

//生成对应的元素 加入某个地方 
//个数 标签名 父元素 
var arr = [0,1,2,3,4,5,6,7,8,9,'+',"-","*",'/'] 
function initElement(tagName,parent,valueArr){ 
    for(var i=0;i<valueArr.length;i++){ 
        var element = document.createElement(tagName) 
        element.innerText = valueArr[i] 
        parent.appendChild(element) 
    } 
}
var box = document.querySelector('div') 
initElement('button',box,arr) 
//dom操作会影响页面的渲染速度（重复多次的渲染）（重绘和回流） 
//获取所有的按钮 
var btns = document.querySelectorAll('button') 
//遍历这个按钮组 
for(var i=0;i<btns.length;i++){ 
    btns[i].onclick = function(){ 
        // console.log(i); 14 
        // console.log(btns[i].innerText); 
        console.log(this.innerText); 
        //指向对应的点击的按钮 
    } 
}
//点击事件是异步 先走同步 再走异步

标签：day09,console,log,元素,Js,学习,var,document,节点
来源： https://www.cnblogs.com/liu-2001/p/16552102.html