标签：day09 console log 元素 Js 学习 var document 节点

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。